html - 使表内的列组大小相等

Question

我有一个包含 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 变得等宽。

有什么想法可以实现我期望的结果吗？

Answer 1

使用您当前的标记...添加 table-layout:fixed; 有效

FIDDLE

.myTable{
    width:100%;
    border: 1px solid black;
    table-layout:fixed;
}
td
{
    height: 30px;
    background: pink;
}
.fixedTd{
    width:32px;
}