W3cubDocs

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

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHub

Support of table values

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

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group 1 12 1 8 7 1
Mobile
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 ≤37 18 4 14 1 1.0

Support of ruby values

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

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container No 12 — 79 38
38
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.
7 No No
Mobile
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 No No 38
38
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.
No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-internal