Mörf: Frage zu display:table

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.

  1. 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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Vase und Vaseline.

  2. 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

    1. 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.