Question

在元素上使用CSS display:table-cell时，是否首选/要求它的父元素包含display:table-row和display:table？

这可以单独存放在文件中吗？

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

或者以表格标签方式，我应该使用适当的样式嵌套一些额外的父标签吗？

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell}
}
</style>
<div class="table">
  <div class="tr">
    <div class="td">content</td>
  </div>
</div>

使用display：table-cell是一个很好的技巧，可以在同一行上布局元素（特别是因为它们之间没有渲染空白区域），但我想知道它是否就是这样：一招。我可以预期这种行为可能会在未来某个时候发生变化吗？

这在风格上是不正确的吗？它似乎在所有（现代）浏览器中一致显示（IE7及更低版本不支持display:table-cell）

<style>
.cell {
  display:table-cell;
  padding:0px 5px;
  background-color:#aaaaaa;
}
</style>
<div>
  <span class="cell">option one</span>
  <span class="cell">option two</span>
  <span class="cell">option three</span>
</div>

Answer 1

你可以自由地做到这一点。如果没有提供table和table-row元素，将为您插入匿名元素（只要浏览器遵循W3C规范）。

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

任何表元素都会自动生成必要的匿名表对象本身，至少由三个嵌套组成对应于'table'/'inline-table'元素的对象，a 'table-row'元素和'table-cell'元素。

请记住，匿名元素无法设置样式。如果表格单元格中没有足够的内容，则这只是一个问题，因为它们占用了父级宽度的100％。在这种情况下，只需要一个表元素，您可以删除表格行。

我可以将table-cell用作独立风格吗？

1 个答案: