<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 Experimental: これらの要素は HTML の <rb> 要素のように動作します。
ruby-text Experimental: これらの要素は HTML の <rt> 要素のように動作します。
ruby-base-container Experimental: これらの要素は無名のボックスとして生成された HTML の <rbc> 要素のように動作します。
ruby-text-container Experimental: これらの要素は HTML の <rtc> 要素のように動作します。

例

CSS テーブルの例

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

HTML

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

css

main {
  display: table;
}

div {
  display: table-row;
}

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

結果

No specification data found for css.properties.display.table_values,css.properties.display.ruby_values.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.