html - 为什么不显示:block and 100% width work on table rows?

Question

具有display: block 的表行无法获得父表的 100% 宽度，当它们具有 display: table-row 时它们自然获得 100% 宽度但是那个 CSS 值有一些其他的副作用，我现在尽量避免。

Plunker that demonstrate the problem.

是什么导致表格行的行为像这样而不像普通的 block 级元素？

Answer 1

此行为与表格在浏览器中的处理方式有关。

table 元素设置为 display:table。 tr 是一个display:table-row，td 是display:table-cell。如果您正在创建一个基于 div 的 css 表格，它的工作原理是一样的。

在这个 fiddle 上:http://jsfiddle.net/rv4v2964/1/ ，我创建了相同的基本示例，但使用了 div，并添加了一个嵌套到表中的 block 元素，但位于任何行或单元格之外。

您会注意到它限制在第一个单元格的宽度内。 this article 中陈述了一个原因:

...the table and column widths are set by the widths of table and col elements or by the width of the first row of cells...

意思是当一个元素在表结构中是奇数时，第一个单元格的宽度设置了整个列的值。这实际上是 W3 上指定的 table-layout 行为:

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

...a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column...

另一篇文章提到了每个浏览器在如何威胁表格结构之外的元素方面的不同行为。 http://snook.ca/archives/html_and_css/getting_your_di

结论

浏览器不喜欢您创建表格并在其中放置不应该存在的元素。这对我来说很可能是错误的。它会将第一个单元格的宽度作为其参数。

在这种特定情况下，解决方法可能是将显示设置为 display: table-caption; 以占据表格的整个宽度。然后，将属性caption-side设置为bottom，它会停留在表格的底部。

参见此处:http://jsfiddle.net/rv4v2964/2/

引用:http://www.tagindex.net/css/table/caption_side.html