<display-internal>

有効な <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

これらの要素は無名のボックスとして生成されます。

ruby-text-container

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

<display-internal> = 
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container  

以下の例は、 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;
}

結果

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