<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. -
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 |
Browser compatibility
Support of table values
BCD tables only load in the browser
table
, table-cell
, table-column
, table-column-group
, table-footer-group
, table-header-group
, table-row
, and table-row-group
Support of ruby values
BCD tables only load in the browser
ruby
, ruby-base
, ruby-base-container
, ruby-text
, and ruby-text-container