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;
}
結果
仕様書
仕様書 | 状態 |
---|---|
CSS Display Module Level 3 display-internal の定義 |
勧告候補 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
対応している 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