我有一个包含 8 列的表格,我知道最后 3 列的宽度始终为 32 像素,因为它们始终包含相同的内容。我需要使其余 5 列的大小相等,并填充固定 td 留下的其余空间。
我有以下 CSS:
.myTable{
width:100%;
border-color:black;
border-width:1px;
}
.fixedTd{
width:32px;
}
和我的标记:
<table class="myTable">
<tr>
<td>Some short content</td>
<td>Some slightly longer content inside</td>
<td>Some very very loooooooong content to show, that columns are not equally sized</td>
<td>Not so long content</td>
<td>Tiny content</td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
</tr>
</table>
我已经尝试将 table-layout:fixed;
添加到表类中,但在这种情况下 fixedTd
不会覆盖样式 - 所有的 tds 变得等宽。
有什么想法可以实现我期望的结果吗?
最佳答案
使用您当前的标记...添加 table-layout:fixed;
有效
.myTable{
width:100%;
border: 1px solid black;
table-layout:fixed;
}
td
{
height: 30px;
background: pink;
}
.fixedTd{
width:32px;
}
关于html - 使表内的列组大小相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19380729/