使用 display:table-cell 没有表格行答案

【问题标题】：Using display:table-cell without table-row使用 display:table-cell 没有表格行
【发布时间】：2013-09-19 02:12:42
【问题描述】：

我最近注意到可以在一个元素上使用 display: table-cell; 而不用使用 display: table-row; 的元素包围它

示例（在 IE、Chrome、FF、Safari、Opera 中工作）：

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

这被认为是不好的风格吗？表格单元格应该被表格行包围还是没有必要？

【问题讨论】：

Using display:table-cell without containing display:table 的可能重复项

标签： html css-tables tablerow tablecell

【解决方案1】：

没有。它不需要与display: table-row 一起使用。阅读here。

table-cell 只代表<td> 或<th>：

指定一个元素代表一个表格单元格。

特别是关于table-cell：

例如，设置为 'display: table-cell' 的图像将填充可用的单元格空间，其尺寸可能有助于表格大小算法，与普通单元格一样。

【讨论】：

我认为这不能回答 OP 的问题。本文档中的什么地方说您不需要包含 display:table-row ？ HTML 表格标记始终至少需要 TABLE -> TR -> TD。由于缺少 display:table-row 容器，我过去遇到过问题，但我已经有大约一年没有看到它了。我想知道现代浏览器现在是否允许您只有一个 display:table 和一个 display:table-cell。此外，如果 tr 现在被自动推断为匿名元素，那么了解您是否可以单独使用 display:table-cell 元素也是一件好事。
Using display:table-cell without containing display:table 有一个指向该文档的链接，上面写着：“对于连续内部表和 'table-caption' 兄弟姐妹序列中的每个 'table-cell' 框 C，如果 C 的父级是不是 'table-row' 然后在 C 周围生成一个匿名的 'table-row' 框，以及 C 的所有连续兄弟是 'table-cell' 框。”
HTML 可能需要 TABLE -> TR -> TD 如果您使用的是实际的表格元素，但如果您只是在 div 上使用 css 显示值，则可能会有所不同，因为现在我们不在这个领域HTML 和 CSS 领域。

【解决方案2】：

来自Everything You Know About CSS Is Wrong：

匿名表格元素

CSS 表格很乐意遵守表格布局的常规规则，即启用 CSS 表格布局的一个极其强大的功能：缺少表格元素由浏览器匿名创建。 CSS2.1 规范状态：

HTML 以外的文档语言可能不包含所有元素在 CSS 2.1 表模型中。在这些情况下，“缺失”的元素必须假设才能使表模型工作。任何桌子 element 会自动生成必要的匿名表对象围绕自身，由至少三个嵌套对象组成对应于“table”/“inline-table”元素，“table-row” 元素和一个“表格单元”元素。

这意味着如果我们使用 display: table-cell; 而没有先包含设置为display: table-row; 的块中的单元格，该行将被暗示——浏览器将表现得好像声明的行是确实在那里。

所以不，使用 display:table-cell 而不包含 display:table-row 没有任何问题。它生成的 CSS 是完全有效的，并且有一些非常有趣的用例。有关使用匿名表元素的更多信息，请参阅我引用的文章。

注意：

它生成有效 CSS 的事实并不意味着没有 display:table-row 或 display:table-row 的 display:table-cell 的行为是稳定的。即使在今天（2016 年 2 月），匿名表格元素的行为在浏览器中仍然不一致。详情请见Inconsistent behavior of display: table and display: table-cell。

【讨论】：