CSS表格单元格等宽

一尘不染

CSS表格单元格等宽

html

我在表容器中有不确定数量的表单元元素。

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

有没有一种纯粹的CSS方法可以使表格单元具有相等的宽度，即使它们内部具有不同大小的内容？

谢谢。

编辑：具有最大宽度将需要知道您有多少个单元格？

阅读 976

2020-05-10

共1个答案

一尘不染

这是工作单元数不确定的有效

您可以为每个父对象固定一个宽度div（表格），否则通常将为100％。

诀窍是使用 table-layout: fixed; 每个单元上的一定宽度触发它，这里是2％。这将触发 另一个
表算法，浏览器会尽力遵守所指示的尺寸。
请使用Chrome（如果需要，请使用IE8）进行测试。可以使用最新的Safari，但我不记得此技巧与它们的兼容性。

CSS（相关说明）：

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

编辑（2013）：当心OS X上的Safari 6，它有table-layout: fixed; 错误
（或者可能与其他浏览器有很大不同，我没有校对CSS2.1 REC表布局;））。为不同的结果做好准备。

2020-05-10