<display-internal>

tableruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

構文

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

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.

ブラウザーの互換性

対応している table の値

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

css.properties.display.table_values

BCD tables only load in the browser

css.properties.display.ruby_values

BCD tables only load in the browser

対応している ruby の値

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

css.properties.display.table_values

BCD tables only load in the browser

css.properties.display.ruby_values

BCD tables only load in the browser

関連情報