CSS <display-internal> Data Type

The CSS <display-internal> data type represents internal display values used by certain layout models. These values give elements specific roles within table or ruby layout and are used as part of the value syntax for the display property.

Syntax

The <display-internal> data type includes internal table and ruby display values:

<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

Table Values

Internal table values assign an element a specific role in the CSS table formatting model.

Value	Description
`table-row-group`	Creates a group of table rows, similar to the role of an HTML `<tbody>` element.
`table-header-group`	Creates a table header row group, similar to the role of an HTML `<thead>` element.
`table-footer-group`	Creates a table footer row group, similar to the role of an HTML `<tfoot>` element.
`table-row`	Creates a table row, similar to the role of an HTML `<tr>` element.
`table-cell`	Creates a table cell, similar to the role of an HTML `<td>` or `<th>` element.
`table-column-group`	Creates a group of table columns, similar to the role of an HTML `<colgroup>` element.
`table-column`	Creates a table column, similar to the role of an HTML `<col>` element.
`table-caption`	Creates a table caption, similar to the role of an HTML `<caption>` element.

Ruby Values

Internal ruby values assign elements roles within the CSS ruby formatting model, which is used to position annotations alongside base text.

Value	Description
`ruby-base`	Creates a ruby base box containing the text being annotated.
`ruby-text`	Creates a ruby annotation box containing annotation text.
`ruby-base-container`	Creates a container that groups ruby base boxes.
`ruby-text-container`	Creates a container that groups ruby annotation boxes.

<display-internal> Example

The following example assigns table formatting roles to ordinary elements using internal display values:

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 8px 12px;
}

Browser Result

Item 1

Item 2

Item 3

The table-row and table-cell values cause the elements to participate in the table formatting model according to their assigned internal roles.

The <display-internal> data type is used by the display property:

display

Specifications

The <display-internal> data type is defined in the CSS Display Module Level 3 .

CSS <display-internal> Data Type