<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: These elements behave like <rb> HTML elements.
ruby-text: These elements behave like <rt> HTML elements.
ruby-base-container: These elements are generated as anonymous boxes.
ruby-text-container: These elements behave like <rtc> HTML elements.

Formal syntax

<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

Examples

CSS tables example

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

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

Result

Specifications

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.

<display-internal>

Syntax

Formal syntax

Examples

CSS tables example

HTML

CSS

Result

Specifications

No specification found

Browser compatibility

css.properties.display.table_values

css.properties.display.ruby_values

See also