<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.

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-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-group,css.properties.display.table-row,css.properties.display.table-cell,css.properties.display.table-column-group,css.properties.display.table-column,css.properties.display.table-caption,css.properties.display.ruby-base,css.properties.display.ruby-text,css.properties.display.ruby-base-container,css.properties.display.ruby-text-container.
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.

Browser compatibility

css.properties.display.table-row-group

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-row-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-header-group

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-header-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-footer-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-row

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-row

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-cell

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-cell

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-column-group

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-column-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-column

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-column

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-caption

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-caption

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.ruby-base

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-base

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-text

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-base-container

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-base-container

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-text-container

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-text-container

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also