使表内的列组大小相等

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;
}