不使用table-row而直接使用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>

这算是不好的样式吗？table-cell 应该被 table-row 包围，还是没有必要？

- squarebrackets

---

可能是重复的问题：在不包含display:table的情况下使用display:table-cell - ahsteele

Answer 1

不需要与display: table-row一起使用。 点击here进行阅读。 table-cell仅表示<td>或<th>：

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

特别是关于table-cell：

例如，设置为'display：table-cell'的图像将填充可用的单元格空间，其尺寸可能会对表格大小算法产生影响，就像普通单元格一样。

- doitlikejustin

---

我不认为这回答了OP的问题。在这份文档中哪里说你不需要包含display:table-row？HTML表格标记始终需要至少是TABLE -> TR -> TD。过去我曾经因为缺少display:table-row容器而遇到问题，但我已经有大约一年没有看到它了。我想知道现代浏览器是否允许您只使用display:table和display:table-cell。另外，如果tr现在被自动推断为匿名元素，那么仅使用display:table-cell元素是否可行也很好知道。 - Phil

在不包含display:table的情况下使用display:table-cell，有一个指向文档的链接，其中指出：“对于一系列连续的内部表格和'table-caption'兄弟姐妹中的每个’table-cell’盒子C，如果C的父级不是'table-row'，则在C和所有连续的'table-cell'盒子周围生成一个匿名的'table-row'盒子。” - ebruchez

如果你使用实际的表格元素，则HTML可能需要TABLE -> TR -> TD，但如果你只是在DIV上使用CSS显示值，它可能会有所不同，因为现在我们已经超出了HTML的范畴，进入到了CSS的领域。 - Kevin Wheeler

Answer 2

从Everything You Know About CSS Is Wrong中得知：

匿名表格元素

CSS表格遵循表格布局的常规规则，从而实现了CSS表格布局的一个非常强大的功能：浏览器通过匿名方式创建缺失的表格元素。CSS2.1规范说明：

不是所有CSS 2.1表格模型中的元素都可以包含在HTML之外的文档语言中。在这些情况下，为了使表格模型工作，必须假设”丢失”的元素存在。任何表格元素将自动生成必要的匿名表格对象，包含至少三个嵌套对象，对应于“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的不一致行为。

- John Slegers