CSS表格单元格等宽

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

谢谢。

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

回答：

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

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

诀窍是使用 每个单元上的一定宽度触发它，这里是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表布局;））。为不同的结果做好准备。

以上是 CSS表格单元格等宽 的全部内容， 来源链接： utcz.com/qa/431349.html

回到顶部