<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.
table-footer-group: 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

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