<display-internal>

Einige Layoutmodelle, wie table und ruby, haben eine komplexe interne Struktur mit verschiedenen Rollen, die ihre Kinder und Nachfahren erfüllen können. Diese Seite definiert diese "internen" Display-Werte, die nur innerhalb dieses speziellen Layout-Modus Bedeutung haben.

Syntax

Gültige <display-internal> Werte:

table-row-group: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tbody>.
table-header-group: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <thead>.
table-footer-group: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tfoot>.
table-row: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <tr>.
table-cell: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <td>.
table-column-group: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <colgroup>.
table-column: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <col>.
table-caption: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <caption>.
ruby-base: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rb>.
ruby-text: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rt>.
ruby-base-container: Diese Elemente werden als anonyme Boxen generiert.
ruby-text-container: Diese Elemente verhalten sich wie HTML-Elemente vom Typ <rtc>.

Formaler 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 demonstriert das Layout eines Formulars unter Verwendung des CSS-Tabellenlayouts.

HTML

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

css

main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}

Ergebnis

Spezifikationen

This feature does not appear to be defined in any specification.

Browser-Kompatibilität

css.properties.display.table-row-group

css.properties.display.table-header-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

Siehe auch

display

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden