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

Question

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

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

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

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

Answer 1

不，它不需要与display: table-row. 在这里阅读。

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

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

特别是关于table-cell：

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

Answer 2

从你所知道的关于 CSS 的一切都是错误的：

匿名表元素

CSS 表格很乐意遵守表格布局的常规规则，这使得 CSS 表格布局具有极其强大的功能：缺少的表格元素由浏览器匿名创建。CSS2.1 规范规定：

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

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

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

---

笔记 ：

它产生有效 CSS 的事实并不意味着display:table-cell没有display:table-row或的行为display:table-row是稳定的。即使在今天（2016 年 2 月），匿名表格元素的行为在浏览器中仍然不一致。有关更多详细信息，请参阅display: table 和 display: table-cell的不一致行为。