如何使表中一行的最后一个单元格占据所有剩余的宽度

在下面的 HTML 片段中，如何使包含“ LAST”的列的宽度占据行的剩余部分，并且包含“ COLUMN ONE”和“ COLUMN TWO”的列的宽度刚好足以包含它们的内容，而不是更大。

谢谢你

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>

86778

小开

最佳答案

你需要告诉前两列不要换行，最后一列的宽度为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>

编辑: 您应该将所有样式/演示文稿放入(外部...) css 中。

对列使用类(如果只针对现代浏览器，可以使用像 nth-child()这样的 css3选择器) :

Html:

<tr>
<td class="col1">
// etc

Css:

.col1, .col2 {
white-space: nowrap;
}
.col3 {
width: 99%;
}