我可以使用table-cell作为独立的风格吗？ [英] Can I use table-cell as a stand alone style?

问题描述

当在一个元素上使用CSS display：table-cell 时，它是不是更好/需要它的父元素 display：

When using the CSS display:table-cell on an element, is it somehow preferred/required that it's parent elements have display:table-row, and display:table?

可以在文档中单独使用吗？

Can this stand alone in a document?

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

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

Or in table tag fashion, should I nest some additional parent tags with appropriate styles?

<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是在同一行布局元素的好技巧没有白色空间，它们之间呈现），但我想知道是否只是：一个诡计。我可以预期的行为可能会在未来的某个时候改变？

Using display:table-cell is a good trick for laying out elements on the same line (especially since no white space is rendered between them) but I'm wondering if it is just that: a trick. Can I expect that the behavior may change at some point in the future?

这是风格不正确吗？它似乎在所有（现代）浏览器中始终显示（IE7和更低版本不支持 display：table-cell ）

Is this stylistically incorrect? It appears to display consistently across all (modern) browsers (IE7 and lower doesn't support 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>

推荐答案

如果没有提供table和table-row元素，将会为你插入匿名（只要浏览器遵循W3C规范）。

You are free to do it either way. If table and table-row elements are not provided, anonymous ones will be inserted for you (as long as the browser follows the W3C specification).

http://www.w3.org/TR/CSS21/tables.html#anonymousboxbox p>

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

任何表格元素都会自动生成必要的匿名
表格对象，包括至少三个嵌套的
对象'table'/'inline-table'元素，
'table-row'元素和'table-cell'元素。

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

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

Keep in mind that anonymous elements cannot be styled. This is only an issue if there isn't enough content within your table-cell elements for them take up 100% of their parent's width. In this case, only a table element is necessary, you can drop the table-row.

这篇关于我可以使用table-cell作为独立的风格吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！