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

Question

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

squ*_*ket 31 html tablecell tablerow css-tables

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

示例(在IE,Chrome,FF,Safari,Opera中工作):

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

doi*_*tin 16

不,它不需要使用display: table-row.阅读这里.

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

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

特别是关于table-cell:

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

我不认为这回答了OP的问题.在本文档中,它表示您不需要包含显示:table-row？HTML表格标记始终至少需要TABLE - > TR - > TD.我过去遇到过问题,因为缺少显示器:桌面行容器,但我现在已经有一年没见过了.我想知道现代浏览器现在是否允许你只有一个显示器:带有显示器的表:table-cell.此外,如果tr现在被自动推断为匿名元素,那么知道是否可以只使用display:table-cell元素也是一件好事. (8认同)
[使用display:table-cell不包含display:table](http://stackoverflow.com/questions/4379561/using-displaytable-cell-without-containing-displaytable)有一个指向doc的链接,其中写着:"For每个'table-cell'框C在一系列连续的内部表和'table-caption'兄弟中,如果C的父级不是'table-row',那么在C周围生成一个匿名的'table-row'框和所有连续的兄弟姐妹C是'table-cell'盒子." (7认同)

Answer 2

Joh*_*ers 12

从你所知道的关于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以获取更多详细信息.

归档时间：	11 年，11 月前
查看次数：	8113 次
最近记录：	7 年，1 月前