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

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'元素的嵌套对象,'table-row'元素和'table-cell'元素.

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