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

Specification
CSS Display Module Level 3 # typedef-display-internal

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`display-internal`	No	12-79	38	7	No	No	No	No	38	No	No	No

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`display-internal`	1	12	1	8	7	1	≤37	18	4	14	1	1.0

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