表格显示(display:table)时设置宽度/高度失效。

Question

最近，我越来越喜欢使用CSS表格布局。

当我在使用display:table时遇到另一个问题时，@vincicat指出表格布局有能力打破分配的css width/height。

我进行了一些实验，并发现浏览器存在差异：http://jsfiddle.net/fabb/WywqB/

在Chrome中

在Opera中

display:table是否可以改变分配的CSSwidth或height？W3C规范中是否有任何来源（我仍未找到）？

浏览器不应该行为相同吗？哪个浏览器是正确的？

- fabb

---

不同的属性不会互相覆盖。 - Mr. BeatMasta

不是“override”，而是“break”！在表格中，许多属性如宽度和高度的作用与非表格中不同。 - Mr Lister

"table"元素的宽度/高度属性不应与任何块类型元素不同。另一件事是，如果您将显示设置为table-cell，则... - Mr. BeatMasta

Answer 1

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

CSS 2.1中，'min-width'和'max-width'属性对于表、内联表、表单元格、表列以及列组的影响是未定义的。

注意：在表上下文中，此属性[vertical-align]的值有不同的含义。请参阅有关表高度算法的章节以了解详情。

[Width]适用于：所有元素，但不包括非替换行内元素、表格行和行组。

等等。

- Mr Lister

---

那么 display:table 受到与 <table> 相同的限制吗？ - fabb

是的！绘图例程并不在意元素被称为“table”或“td”等，只关心元素的显示类型。 - Mr Lister

我在我的问题中更新了Chrome和Opera的比较，你认为W3规范允许两种解释吗？ - fabb

那就变成了另一个问题。但是为了回答，我猜测使用display:table而不将元素放在display:table-row和table-cell中可能会导致未指定的行为。你是否检查过如果模拟完整的表格会发生什么？ - Mr Lister

当使用一些 display:table* 属性（“匿名表格元素”）时，根据文章所述，缺失的表格元素会在解释时合成。因此，没有区别：http://jsfiddle.net/fabb/QfDAW/。 - fabb

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不是浏览器...）

- user123444555621