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.

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

<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

Specification
CSS Display Module Level 3 # typedef-display-internal

Support of table values

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

Support of ruby values

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

See also

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

Last modified: Feb 22, 2022, by MDN contributors

Select your preferred language English (US)Français日本語한국어Português (do Brasil)中文 (简体) Change language