CSS表格的布局：固定所有列，除了第一

我与table-layout:fixed玩，它的工作原理几乎完全满足我的需求。然而，显然我无法获得固定大小的列，当我从表中动态添加或删除列时，这些列不会发生变化。CSS表格的布局：固定所有列，除了第一

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

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

10px的是不够的复选框。如何测量第一列实际应该有多宽，并将该宽度分配给它。列开始宽度足够大的唯一原因是该表宽度为500px，因此所有列都伸展以适应。 'table-layout：fixed'只有在大小匹配的情况下才能正常工作。 –

20px将是理想的，但在开始时它会看起来比20px更宽，这就是我想要避免的。它应该在所有情况下（无论是几列还是一堆列）看起来相同 –

然后避免500px宽的表与220px列之间的不匹配。这是造成所有问题的原因。 –

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

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

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

2015-11-05 12:50:57

回答