<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 の値

BCD tables only load in the browser

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

対応している ruby の値

BCD tables only load in the browser

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

関連情報