<display-internal>

Einige Layout-Modelle, wie table und ruby, haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Diese Seite definiert jene "internen" Display-Werte, die nur innerhalb dieses speziellen Layout-Modus eine 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 einfaches Formular mithilfe des CSS-Tabellenlayouts gestaltet 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

No specification found

No specification data found for css.properties.display.table-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-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.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

css.properties.display.table-row-group

BCD tables only load in the browser

css.properties.display.table-header-group

BCD tables only load in the browser

BCD tables only load in the browser

css.properties.display.table-row

BCD tables only load in the browser

css.properties.display.table-cell

BCD tables only load in the browser

css.properties.display.table-column-group

BCD tables only load in the browser

css.properties.display.table-column

BCD tables only load in the browser

css.properties.display.table-caption

BCD tables only load in the browser

css.properties.display.ruby-base

BCD tables only load in the browser

css.properties.display.ruby-text

BCD tables only load in the browser

css.properties.display.ruby-base-container

BCD tables only load in the browser

css.properties.display.ruby-text-container

BCD tables only load in the browser

Siehe auch