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.

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 are generated as anonymous boxes.

ruby-text-container Experimental

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

<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

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.

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

css.properties.display.table_values

BCD tables only load in the browser

css.properties.display.ruby_values

BCD tables only load in the browser

See also

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