display：table破解设置的宽度/高度

Question

最近，我更喜欢使用CSS-Table Layouts。

当我another issue与display:table时，@ vincicat指出表格布局可以打破指定的css width / height < /强>

我尝试了一点，遇到了浏览器的不一致问题：http://jsfiddle.net/fabb/WywqB/

Chrome中的

Opera中的

display:table是否可以更改已分配的CSS width或height？ W3C规范中是否有任何消息来源（我还没有找到任何内容）？

浏览器的行为是否应该相同？哪个浏览器是对的？

Answer 1

http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html提到表格的宽度和高度计算方式不同，很多次。

  

在CSS 2.1中，'min-width'和'max-width'对表，内联表，表格单元格，表格列和列组的影响未定义。

     

请注意。此属性的值[vertical-align]在表的上下文中具有不同的含义。有关详细信息，请参阅表高度算法部分。

     

[宽度]适用于：所有元素，但未替换的内联元素，表格行和行组

等等。

Answer 2

宽度和高度应分开考虑：

http://www.w3.org/TR/CSS2/tables.html#width-layout

  

表宽算法[...]

     

CSS没有为表格定义“最佳”布局，因为在许多情况下，最佳的是品味问题。 CSS确实定义了用户代理在布置表时必须遵守的约束。用户代理可以使用他们希望的任何算法，除了选择“固定布局算法”之外，可以自由选择渲染速度而不是精度。

和

  

表高度算法[...]

     

表的高度由'table'或'inline-table'元素的'height'属性给出。值“auto”表示高度是行高度加上任何单元格间距或边界的总和。任何其他值都被视为最小高度。 CSS 2.1没有定义当'height'属性导致表比其他情况更高时分配额外空间的方式。

因此，您无法控制表格的高度，但如果指定table-layout:fixed，则可以控制其宽度。

我很确定它适用于所有浏览器（请记住IE8 is not a browser ...）