<display-internal>
Quick Summary for <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.
Code Usage for <display-internal>
<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> 
More Details for <display-internal>

<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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“We ought to take outdoor walks in order that the mind may be strengthened and refreshed by the open air and much breathing.".
Seneca
Random CSS Property

border-inline-end-style

The border-inline-end-style CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.
border-inline-end-style css reference