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;作品

小提琴

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