Web/CSS/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 behave like <rbc> HTML elements generated as anonymous boxes.

ruby-text-container '

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

Specifications

Specification	Status
CSS Display Module Level 3The definition of 'display-internal' in that specification.	Candidate Recommendation

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support of table values

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 8	Opera Full support 7	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

Support of ruby values

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container	Chrome No support No	Edge No support 12 — 79	Firefox Full support 38 Full support 38 No support 34 — 38 Disabled' Disabled' From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 7	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 38 Full support 38 No support 34 — 38 Disabled' Disabled' From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

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

<display-internal> by Mozilla Contributors is licensed under CC-BY-SA 2.5.