CSS 表格单元格等宽 [英] CSS table-cell equal width

问题描述

我在表格容器内有不确定数量的表格单元格元素.

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

是否有一种纯 CSS 方法可以使表格单元格的宽度相等，即使它们包含不同大小的内容?

拥有最大宽度需要知道我认为您有多少个单元格?

解决方案

这是一个不确定单元格数量的工作:http://jsfiddle.net/r9yrM/1/

您可以为每个父 div(table)固定一个宽度，否则它会像往常一样 100%.

诀窍是使用 table-layout: fixed; 和每个单元格上的一些宽度来触发它，这里是 2%.这将触发 other 表 algorightm，浏览器会非常努力地遵守指示的维度.
请使用 Chrome(和 IE8- 如果需要)进行测试.最近的 Safari 没问题，但我不记得这个技巧与它们的兼容性.

CSS(相关说明):

div {显示:表；宽度:250px；表格布局:固定；}div >div {显示:表格单元格；宽度:2%；/* 或 100% 根据 OP 注释.请参阅下面关于 Safari 6 的编辑 */}

编辑(2013 年):当心 OS X 上的 Safari 6，它有 table-layout: fixed; wrong(或者可能只是不同，与其他浏览器非常不同. 我没有校对 CSS2.1 REC 表格布局 ;) ).准备好迎接不同的结果.

I have an indeterminate number of table-cell elements inside a table container.

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

Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them?

Having a max-width would entail knowing how many cells you have I think?

解决方案

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.

CSS (relevant instructions):

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 */
}

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.

这篇关于CSS 表格单元格等宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！