#html #css
#HTML #css
Вопрос:
Я хотел бы поместить последний div в каждой строке под строкой. Возможно ли достичь этого без взлома display: table ? Я не хочу добавлять вторую строку для этого. Я попытался объяснить свою проблему на изображении ниже 
Мой html
<table>
<thead>
<tr>
<td>id</td>
<td>creator</td>
<td>receiver</td>
<td>start_date</td>
<td>end_date</td>
<td>daily_pay</td>
<td>total_votes</td>
<td>permlink</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>aaaabbbb</td>
<td>aaaabbbb</td>
<td>
{new Date(
'2015-05-01T00:00:00'
).toLocaleString()}
</td>
<td>
{new Date(
'2019-06-01T00:00:00'
).toLocaleString()}
</td>
<td>100.000</td>
<td>0</td>
<td>
<a href="javascript:void(0)">link</a>
</td>
<td>testing stuff</td>
</tr>
<tr>
<td>3</td>
<td>aaaabbbb</td>
<td>aaaabbbb</td>
<td>
{new Date(
'2015-05-01T00:00:00'
).toLocaleString()}
</td>
<td>
{new Date(
'2019-06-01T00:00:00'
).toLocaleString()}
</td>
<td>100.000</td>
<td>0</td>
<td>
<a href="javascript:void(0)">link</a>
</td>
<td>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reprehenderit amet
ipsa adipisci praesentium unde, illum
iure fuga necessitatibus dolorem. Sed
ipsam facilis modi eligendi cumque
maiores quae repellat incidunt error!
</td>
</tr>
</tbody>
</table>
Комментарии:
1. покажите ваш html, пожалуйста
2. Похоже, вам может понадобиться эта ячейка в качестве новой строки, которая охватывает 8 столбцов
Ответ №1:
Было бы наиболее семантично, если бы вы сделали последнюю ячейку a <td> внутри новой <tr> , охватывающей все 8 столбцов через colspan .
tbody td {
padding: .5em;
}
tbody tr:nth-child(odd) {
background-color: #ccc;
} <table>
<thead>
<tr>
<th>id</th>
<th>creator</th>
<th>receiver</th>
<th>start_date</th>
<th>end_date</th>
<th>daily play</th>
<th>total votes</th>
<th>permalink</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaaaaa</td>
<td>bbbbbbbb</td>
<td>mike n</td>
<td>01/15/2000</td>
<td>01/15/2001</td>
<td>1000.00</td>
<td>0</td>
<td><a href="#">link</a></td>
</tr>
<tr>
<td colspan="8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quod officiis nostrum provident distinctio consequatur nobis vero vel dignissimos magnam. Harum velit mollitia veniam, provident, labore repellat beatae nisi error!
</td>
</tr>
<tr>
<td>aaaaaaaa</td>
<td>bbbbbbbb</td>
<td>mike n</td>
<td>01/15/2000</td>
<td>01/15/2001</td>
<td>1000.00</td>
<td>0</td>
<td><a href="#">link</a></td>
</tr>
<tr>
<td colspan="8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quod officiis nostrum provident distinctio consequatur nobis vero vel dignissimos magnam. Harum velit mollitia veniam, provident, labore repellat beatae nisi error!
</td>
</tr>
</tbody>
</table> Ответ №2:
Пожалуйста, удалите последний текст td, который вы хотите поместить после всех tr, создайте новый tr после ссылки permlink и добавьте td, который вы хотите отобразить во всю ширину, пожалуйста, ознакомьтесь с моим предложением.
<table>
<thead>
<tr>
<td>id</td>
<td>creator</td>
<td>receiver</td>
<td>start_date</td>
<td>end_date</td>
<td>daily_pay</td>
<td>total_votes</td>
<td>permlink</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>aaaabbbb</td>
<td>aaaabbbb</td>
<td>
{new Date( '2015-05-01T00:00:00' ).toLocaleString()}
</td>
<td>
{new Date( '2019-06-01T00:00:00' ).toLocaleString()}
</td>
<td>100.000</td>
<td>0</td>
<td>
<a href="javascript:void(0)">link</a>
</td>
<!-- <td>testing stuff</td> -->
</tr>
<tr>
<td colspan="8">testing stuff</td>
</tr>
<tr>
<td>3</td>
<td>aaaabbbb</td>
<td>aaaabbbb</td>
<td>
{new Date( '2015-05-01T00:00:00' ).toLocaleString()}
</td>
<td>
{new Date( '2019-06-01T00:00:00' ).toLocaleString()}
</td>
<td>100.000</td>
<td>0</td>
<td>
<a href="javascript:void(0)">link</a>
</td>
</tr>
<tr>
<td colspan="8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit amet ipsa adipisci praesentium unde, illum iure fuga necessitatibus dolorem. Sed ipsam facilis modi eligendi cumque maiores quae repellat incidunt error!</td>
</tr>
</tbody>
</table>