<display-internal>

table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

構文

有効な <display-internal> の値は次の通りです。

table-row-group

これらの要素は HTML の <tbody> 要素のように動作します。

table-header-group

これらの要素は HTML の <thead> 要素のように動作します。

table-footer-group

これらの要素は HTML の <tfoot> 要素のように動作します。

table-row

これらの要素は HTML の <tr> 要素のように動作します。

table-cell

これらの要素は HTML の <td> 要素のように動作します。

table-column-group

これらの要素は HTML の <colgroup> 要素のように動作します。

table-column

これらの要素は HTML の <col> 要素のように動作します。

table-caption

これらの要素は HTML の <caption> 要素のように動作します。

ruby-base

これらの要素は HTML の <rb> 要素のように動作します。

ruby-text

これらの要素は HTML の <rt> 要素のように動作します。

ruby-base-container

これらの要素は無名のボックスとして生成された HTML の <rbc> 要素のように動作します。

ruby-text-container

これらの要素は HTML の <rtc> 要素のように動作します。

例

CSS テーブルの例

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

HTML

<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age">
  </div>
</main>

CSS

main {
  display: table;
}

div {
  display: table-row;
}

label, input {
  display: table-cell;
  margin: 5px;
}

結果

仕様書

ブラウザーの互換性

対応している table の値

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group

対応している ruby の値

ruby, ruby-base, ruby-base-container, ruby-text, ruby-text-container

関連情報

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-box>
  • <display-legacy>