使表内的列组大小相等答案

【问题标题】：Making group of columns inside table equal sized使表内的列组大小相等
【发布时间】：2013-10-15 20:40:46
【问题描述】：

我有一个表，里面有 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 不会覆盖样式 - 所有的 td 都变得相等。

有什么想法可以达到我期望的结果吗？

【问题讨论】：

表格的总宽度是固定的吗？是这样，那么这是可能的，如果不是，您正在尝试将固定宽度与流体宽度相结合，这可能很困难。
它们的大小已经相同，如您所见here 我刚刚添加了边框和高度以显示差异。那么你的问题到底是什么？
equally sized 5 列与其他 3 列的总宽度相同或 5 列中的每一列与 3 列中的每一列的大小相同是什么意思？
Nathan Lee - 尝试在前 5 列中添加一些不同长度的内容，您会发现它们的宽度不相等。
DrCopyPaste 我的意思是，表格中剩余的空间（32px 的 3 列占用了一些空间），应该在 5 列之间平均分配。

标签： html css

【解决方案1】：

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

FIDDLE

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

【讨论】：

奇怪，它在 JSFiddle 中有效，但在我的应用程序中无效。我已经用屏幕截图更新了我的问题。
没关系，我忘记将 fixedTd 类分配给表格中的元素，它们破坏了所有标记。