Как сделать так, чтобы последняя ячейка строки в таблице занимала всю оставшуюся ширину
в приведенном ниже фрагменте HTML, как я могу сделать ширину столбца, который содержит "последний" занимают оставшуюся часть строки, и ширины столбцов, которые содержат "столбец один" и "столбец два" быть достаточно широкими, чтобы содержать их содержимое, а не больше.
спасибо
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>
<table width="100%">
<tr>
<td>
<span>
COLUMN
</span>
<span>
ONE
</span>
</td>
<td>
COLUMN TWO
</td>
<td>
LAST
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
ANOTHER ROW
</td>
</tr>
</table>
1 ответ:
вам нужно будет сказать первые два столбца, чтобы не обернуть и дать последний столбец шириной 99%:
<table width="100%"> <tr> <td style="white-space: nowrap;"> <span> COLUMN </span> <span> ONE </span> </td> <td style="white-space: nowrap;"> COLUMN TWO </td> <td width="99%"> LAST </td> </tr> </table>
Edit: вы должны поместить все стили / презентации в (Внешний...) стиль CSS.
использование классов для столбцов (вы можете использовать CSS3 селекторы, такие как
nth-child()
вместо этого, если вы ориентируетесь только на современные браузеры):html:
<tr> <td class="col1"> // etc
css:
.col1, .col2 { white-space: nowrap; } .col3 { width: 99%; }