Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<display-internal>
Einige Layoutmodelle wietable undruby 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-groupDiese Elemente verhalten sich wie
<tbody>HTML-Elemente.table-header-groupDiese Elemente verhalten sich wie
<thead>HTML-Elemente.table-footer-groupDiese Elemente verhalten sich wie
<tfoot>HTML-Elemente.table-rowDiese Elemente verhalten sich wie
<tr>HTML-Elemente.table-cellDiese Elemente verhalten sich wie
<td>HTML-Elemente.table-column-groupDiese Elemente verhalten sich wie
<colgroup>HTML-Elemente.table-columnDiese Elemente verhalten sich wie
<col>HTML-Elemente.table-captionDiese Elemente verhalten sich wie
<caption>HTML-Elemente.ruby-baseDiese Elemente verhalten sich wie
<rb>HTML-Elemente.ruby-textDiese Elemente verhalten sich wie
<rt>HTML-Elemente.ruby-base-containerDiese Elemente werden als anonyme Boxen generiert.
ruby-text-containerDiese 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" name="name" /> </div> <div> <label for="age">Age</label> <input type="text" name="age" /> </div></main>CSS
main { display: table;}div { display: table-row;}label,input { display: table-cell; margin: 5px;}