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

回答