<display-internal>

Some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.

Syntax

Valid <display-internal> values:

table-row-group
These elements behave like <tbody> HTML elements.
table-header-group
These elements behave like <thead> HTML elements.
table-footer-group
These elements behave like <tfoot> HTML elements.
table-row
These elements behave like <tr> HTML elements.
table-cell
These elements behave like <td> HTML elements.
table-column-group
These elements behave like <colgroup> HTML elements.
table-column
These elements behave like <col> HTML elements.
table-caption
These elements behave like <caption> HTML elements.
ruby-base This is an experimental API that should not be used in production code.
These elements behave like <rb> HTML elements.
ruby-text This is an experimental API that should not be used in production code.
These elements behave like <rt> HTML elements.
ruby-base-container This is an experimental API that should not be used in production code.
These elements behave like <rbc> HTML elements generated as anonymous boxes.
ruby-text-container This is an experimental API that should not be used in production code.
These elements behave like <rtc> HTML elements.

Examples

CSS tables example

The following example demonstrates laying out a simple form using CSS table layout.

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;
}

Result

Specifications

Browser compatibility

Support of table values

BCD tables only load in the browser

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

Support of ruby values

BCD tables only load in the browser

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

See also