CSS 表格布局：固定到除第一列之外的所有列答案

【问题标题】：CSS table-layout: fixed to all columns except the firstCSS 表格布局：固定到除第一列之外的所有列
【发布时间】：2016-02-05 13:16:39
【问题描述】：

我正在使用table-layout:fixed，它几乎可以完美地满足我的需求。但是，显然，当我从表中动态添加或删除列时，我不能拥有不会改变的固定大小的列。

Here 就是一个例子。如果添加一些列，您会看到第一列缩小并且复选框从列中弹出。如何使第一列具有固定大小，同时在其他列上保持 table-layout:fixed 行为？

我正在使用table-layout:fixed，因为一旦我添加了足够多的列，它将添加一个水平滚动条，并保证这些列至少具有我指定的宽度。

【问题讨论】：

10px 对于复选框来说是不够的。如何测量第一列的实际宽度并将该宽度分配给它。该列开始足够宽的唯一原因是该表是 500 像素宽，因此所有列都会伸展以适应。 table-layout:fixed 只有在大小匹配时才能正常工作。
20px 是理想的，但一开始它看起来会比 20px 宽得多，这就是我想要避免的。它应该在所有情况下看起来都一样（无论是几列还是一堆列）
然后避免表格宽度为 500px 和列总计 220px 之间的不匹配。这就是导致所有问题的原因。
@FredericoSchardong - 您可以在添加新表格单元格时重新计算宽度，例如 fiddle。

【解决方案1】：

您可以尝试不使用table-layout: fixed 的不同方法并获得几乎相同的结果。此外，您可以定义min-width，而不是为<th> 使用width 属性。

检查这个更新的小提琴：http://jsfiddle.net/L9rudjng/5/。我也将内联 CSS 移到 CSS 框中。

表格将保持 500 像素，直到无法容纳足够的 100 像素宽度的 <th>。然后它会展开并强制水平滚动。

【讨论】：