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一起使用。阅读here。

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

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

特别关于table-cell：

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

Answer 2

来自Everything You Know About CSS Is Wrong：

匿名表元素

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


HTML以外的文档语言可能不包含所有元素     在CSS 2.1表模型中。在这些情况下，“缺失”元素     必须假设为了使表模型起作用。任何表格     element将自动生成必要的匿名表对象     围绕自身，由至少三个嵌套对象组成     对应于“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的{{1}}的行为是稳定的。即使在今天（2016年2月），令人厌恶的表元素的行为在浏览器中仍然不一致。有关详细信息，请参阅Inconsistent behavior of display: table and display: table-cell。

使用display：table-cell没有table-row

2 个答案:

匿名表元素

注意：