Firefox Tomorrow

css type

`<display-internal>` CSS type

View on MDN ↗

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 are generated as anonymous boxes.
  • ruby-text-container
    • : These elements behave like <rtc> HTML elements.

Formal syntax

Examples

CSS tables example

The following example demonstrates laying out a 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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also