5

要素で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>
4

1 に答える 1