<display-internal>
table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
構文
有効な <display-internal> の値は次の通りです。
table-row-group-
これらの要素は HTML の
<tbody>要素のように動作します。 table-header-group-
これらの要素は HTML の
<thead>要素のように動作します。 -
これらの要素は 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-
これらの要素は無名のボックスとして生成されます。
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;
}
結果
仕様書
No specification found
No specification data found for css.properties.display.table-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-group,css.properties.display.table-row,css.properties.display.table-cell,css.properties.display.table-column-group,css.properties.display.table-column,css.properties.display.table-caption,css.properties.display.ruby-base,css.properties.display.ruby-text,css.properties.display.ruby-base-container,css.properties.display.ruby-text-container.
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.