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

问题描述

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

 < div style = table;> 
< div style =display：table-cell;>< / div> 
< div style =display：table-cell;>< / div> 
< / div> 
 

有一个纯CSS方法来获得表格单元格的宽度相等，即使他们有不同的

感谢。

编辑：有一个最大宽度需要知道有多少个单元格

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

您可以为每个父项设置宽度 div （表），否则将是100％。

诀窍是使用 table-layout：fixed; 和每个单元格的一些宽度来触发它，这里是2％。这将触发其他表算法，浏览器尝试非常难以遵守指示的尺寸。

请使用Chrome（和IE8-如果需要）测试。

CSS（相关说明）：

  div {
 display：table; 
 width：250px; 
 table-layout：fixed; 
} 
 
 div> div {
 display：table-cell; 
 width：2％; / *或100％。请参阅编辑下面的Safari 6 * / 
} 
  

6在OS X上，它有 table-layout：fixed; 错误（或者可能只是不同，非常不同于其他浏览器，校验读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?

Thanks.

Edit: 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屋！