CSS display:table, table-row, table-cell

Tabellen Besonderheiten: Alle Elemente gleich hoch, mit middle vertikal mittig setzen

display: table, display: table-row und table-cell erzeugen ohne großen Aufwand CSS-Tabellen. Auch wenn HTML-Tabellen out und tabu sind: CSS-Tabellen per display table holen die nützlichen Eigenschaften wieder ans Tageslicht und leihen sie einem schlichen div-Tag.

So haben z.B. alle Elemente innerhalb einer Tabellenzeile dieselbe Höhe und wir können Elemente in Tabellenzellen vertikal zentrieren, was ansonsten nur mit vielerlei kleinen Tricks funktioniert.

Tabellen waren in der Zeit vor CSS2 das angesagte Mittel für das Positionieren in einem Spaltenlayout. Heute wird das Spaltenlayout vor allem durch float, display: flex und display: grid erzeugt.

Da sich das Layout der Webseite heute an den kleinen Monitoren ausrichten muss, pickt die Kombination aus Media Queries und CSS display die fast vergessen Rosinen von Tabellenelementen zurück ans Tageslicht.

display: table

Eines der nützlichen Verhalten von Tabellen: Sie werden nur so breit wie ihr Inhalt und lassen sich mit einem einfachen margin-left: auto und margin-right: auto in horizontal mittig in ihren umfassenden Blocks setzen. Dieses Verhalten ist von Haus aus sowohl dynamisch als auch responsive.

Zeile in einer CSS-Tabelle
Zeile in einer CSS-Tabelle
.table { 
   margin-left: auto;
   margin-right: auto;
   display: table;
}

   // ----- //	

<div class="table">
   <div>Zeile in einer CSS-Tabelle</div>
   <div>Zeile in einer CSS-Tabelle</div>
</div>     

display: table-row und table-cell

table-row und table-cell bilden die Zeile einer Tabelle nach und setzen z.B. drei Spalten auf großen Monitoren nebeneinander und auf kleinen Monitoren untereinander. display:table-cell beherrscht das kleine Kunststück, ein Element in der Vertikalen zu zentrieren oder an den unteren Rand des umfassenden Blocks zu platzieren.

display:table-row setzt Spalten gleicher Höhe nebeneinander, weil in einer HTML-Tabellenzeilen immer alle Zellen gleich hoch sind.

Bild in einer Tabellenzelle oben
Bild in einer Tabellenzelle oben Bild in einer Tabellenzelle oben Bild in einer Tabellenzelle oben
Bild in einer Tabellenzelle oben Bild in einer Tabellenzelle oben

display:table-row für den Container und display:table-cell passen die Höhe der drei Boxen automatisch an das größte Element an. Eine einfache Media Query sorgt dafür, dass die Boxen auf kleinen Monitoren untereinander erscheinen und nur auf größeren Monitoren nebeneinander.

Zu beachten ist dabei allerdings, dass margin keine Wirkung bei Tabellenzellen zeigt – weder bei echten HTML-Tabellen noch bei CSS-Tabellen. Wenn ein div-Block das Verhalten von table-cell annimmt, legt er gleichzeitig auch sein anerzogenes Verhalten ab. Der Block mit display: table bekommt anstelle dessen border-spacing, um CSS-Tabellenzellen auf Abstand zu halten.

border-spacing kann einen oder zwei Werte anreichen: ein Wert für den Abstand an allen vier Seiten, bei zwei Werten ist der erste Wert der Abstand der nach links und rechts und der zweite Wert ist der Abstand nach unten und oben.

.table-cell:nth-child(1) {background: wheat}
.table-cell:nth-child(2) {background: blue}
.table-cell:nth-child(3) {background: red}

@media (min-width: 40em) {
.table { 
   display: table;
   border-spacing: 0.5em;
}
.table-row {display: table-row; }
.table-cell {display: table-cell; }
}

<div class="table">
<div class="table-row">
   <div class="table-cell">
      …
   </div>
   <div class="table-cell">
      …
	</div>
   <div class="table-cell">
      …
   </div>
</div>
</div>
			

Als Zugabe kann der Inhalt von CSS-Tabellenzellen table-cell mit vertical-align top am oberen oder mit vertical-align bottom am unteren Rand der CSS-Zelle ausgerichtet werden – vor allem aber mit vertical-align middle vertikal zentriert werden.

vertical-align: bottom

Bild in einer Tabellenzelle oben

Candy toffee croissant pudding chocolate bar candy canes. Apple pie donut muffin carrot cake.

vertical-align: middle

Bild in einer Tabellenzelle oben

Bonbon chupa chups ice cream toffee macaroon liquorice sesame

vertical-align: top

Bild in einer Tabellenzelle oben

Bear claw gingerbread gummi bears marshmallow jujubes sesame snaps cheesecake jelly. Cake toffee chupa chups dragée lollipop lollipop lemon drops danish topping.

display flex und display grid sind die modernere Lösung für diese kleinen Aufgaben, aber display table / table-row / table-cell sind einfach, brauchen nur ein minimales Markup und minimales CSS und funktionieren in allen Browsern, während flex und grid in IE11 und auch in Edge noch mit einer älteren Syntax agieren.

Bild in einer Tabellenzelle oben
Vivamus ullamcorper cursus nibh, at mollis enim.
Proin pellentesque aliquam.
Donec arcu odio, vehicula ac rutrum ut
Donec arcu odio, vehicula ac rutrum ut
€ 99
Details
Bild in einer Tabellenzelle oben
Vivamus ullamcorper cursus nibh, at mollis enim.
€ 79
Details
Bild in einer Tabellenzelle oben
Vivamus ullamcorper cursus nibh, at mollis enim. Donec arcu odio, vehicula ac rutrum ut
Proin pellentesque aliquam.
Donec arcu odio, vehicula ac rutrum ut
€ 129
Details

CSS display

Erblich: Nein

display
table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption
content | none

inline-block | inline-list-item | inline-table | inline-flex | inline-grid

table
stellt ein Element als Blockelement dar.
table-caption
stellt ein Element als Tabellenbeschriftung (caption) dar.
table-cell
stellt das Element dar, als wäre es eine Tabellenzelle (td).
table-column
stellt das Element dar, als wäre es eine Tabellenspalte (col).
table-column-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenspalten (colgroup).
table-footer-group
stellt das Element dar, als wäre es eine Gruppe von Tabellen-Fußnoten (table footer).
table-header-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenköpfen (table header).
table-row
stellt das Element dar, als wäre es eine Tabellenzeile (table row).
table-row-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenzeilen (table row).
top bottom middle