<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
-
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 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-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-group,css.properties.display.table-row,css.properties.display.table-cell,css.properties.display.table-column-group,css.properties.display.table-column,css.properties.display.table-caption,css.properties.display.ruby-base,css.properties.display.ruby-text,css.properties.display.ruby-base-container,css.properties.display.ruby-text-container
.
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
css.properties.display.table-row-group
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-row-group |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-header-group
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-header-group |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-footer-group
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-footer-group |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-row
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-row |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-cell
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-cell |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-column-group
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-column-group |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-column
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-column |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table-caption
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table-caption |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.ruby-base
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby-base |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
css.properties.display.ruby-text
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby-text |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
css.properties.display.ruby-base-container
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby-base-container |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
css.properties.display.ruby-text-container
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby-text-container |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support