<display-internal>
Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur, mit verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Diese Seite definiert diese "internen" Display-Werte, die nur innerhalb des jeweiligen Layoutmodus Bedeutung haben.
Syntax
Gültige <display-internal> Werte:
table-row-group-
Diese Elemente verhalten sich wie
<tbody>HTML-Elemente. table-header-group-
Diese Elemente verhalten sich wie
<thead>HTML-Elemente. -
Diese Elemente verhalten sich wie
<tfoot>HTML-Elemente. table-row-
Diese Elemente verhalten sich wie
<tr>HTML-Elemente. table-cell-
Diese Elemente verhalten sich wie
<td>HTML-Elemente. table-column-group-
Diese Elemente verhalten sich wie
<colgroup>HTML-Elemente. table-column-
Diese Elemente verhalten sich wie
<col>HTML-Elemente. table-caption-
Diese Elemente verhalten sich wie
<caption>HTML-Elemente. ruby-base-
Diese Elemente verhalten sich wie
<rb>HTML-Elemente. ruby-text-
Diese Elemente verhalten sich wie
<rt>HTML-Elemente. ruby-base-container-
Diese Elemente werden als anonyme Boxen generiert.
ruby-text-container-
Diese Elemente verhalten sich wie
<rtc>HTML-Elemente.
Formale Syntax
<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
Beispiele
CSS-Tabellenbeispiel
Das folgende Beispiel zeigt, wie ein Formular-Layout mit CSS-Tabellenlayout erstellt wird.
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; }