Frage zu display:table
Mörf
- css
0 Matthias Apsel0 molily0 Mörf
Hallo,
laut Spezifikation sollen die display-Werte table* ja das Verhalten einer HTML-Tabelle simulieren.
Es wird auch sehr schön beschrieben, wie die "virtuelle Tabelle" ggf. um fehlende Elemente (z.B. eine table-cell ohne vorige table-row Angabe) ergänzt werden soll.
Was mir aber nicht ganz klar ist: Muss ein als display:table definiertes Element überhaupt Kinder haben? Also konkret wäre folgendes zulässig, oder nicht?
<div style="display:table; margin: 0 auto;">Dies ist eine Tabelle ohne Kind</div>
Auf die Art ließen sich ja recht einfach zentrierte Block-Elemente schaffen, die auf Größe ihres Inhalts schrumpfen.
Om nah hoo pez nyeetz, Mörf!
Was mir aber nicht ganz klar ist: Muss ein als display:table definiertes Element überhaupt Kinder haben? Also konkret wäre folgendes zulässig, oder nicht?
<div style="display:table; margin: 0 auto;">Dies ist eine Tabelle ohne Kind</div>
Es ist erlaubt. Du darfst nicht den Inhalt und die Darstellung durcheinander bringen. Einschränkungen, welche Nachfahren ein Element haben darf, werden in der HTML-Spezifikation getroffen. CSS kümmert sich im Allgemeinen nicht darum.
Google mal nach „shrink to fit“.
Matthias
Hallo,
Muss ein als display:table definiertes Element überhaupt Kinder haben?
Nein. Aus CSS-Sicht lassen sich solche Erfordernisse nicht ausdrücken.
Also konkret wäre folgendes zulässig, oder nicht?
<div style="display:table; margin: 0 auto;">Dies ist eine Tabelle ohne Kind</div>
Ist zulässig. Zumindest wüsste ich nichts, was dagegen spricht.
Wie du sagst, ist das automatische Einfügen von fehlenden Boxen spezifiziert:
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Auf die Art ließen sich ja recht einfach zentrierte Block-Elemente schaffen, die auf Größe ihres Inhalts schrumpfen.
Ja. Das ginge allerdings auch mit display: inline-block, text-align: center und ggf. vertical-align: top.
Mathias
Auf die Art ließen sich ja recht einfach zentrierte Block-Elemente schaffen, die auf Größe ihres Inhalts schrumpfen.
Ja. Das ginge allerdings auch mit display: inline-block, text-align: center und ggf. vertical-align: top.
Problem dabei wäre jedoch, dass das text-align:center auf das Eltern-Element angewendet werden muss. Hier kann man hingegen sowohl die shrink-to-fit, als auch die zentriert Eigenschaft komplett im betreffenden Element festlegen.