在下面的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>
发布于 2009-06-29 22:50:21
您需要告诉前两列不要换行,并将最后一列的宽度设置为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%;
}
https://stackoverflow.com/questions/1060933
复制相似问题