在下面的 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>
您需要告诉前两列不要换行,并将最后一列的宽度设置为 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%;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)