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

Tabellen mit CSS nachbilden

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

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

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 horizontal zentriert in ihren umfassenden Blocks setzen. Dieses Verhalten ist von Haus aus sowohl dynamisch als auch responsiv.

.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-Tabellenzeile immer alle Zellen gleich hoch sind.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu nisl luctus, pulvinar ante eget, ornare mi.

Phasellus non vulputate magna, vitae tincidunt felis.

Vestibulum id sodales eros, ac tristique quam. Pellentesque vel tortor leo. Morbi ornare feugiat justo eu consectetur. Cras tempor elementum mi, at commodo elit vulputate vel.

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>	

table-cell mit vertical-align: top / bottom

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

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

vertical-align: middle

Bonbon chupa chups ice cream toffee macaroon liquorice sesame

vertical-align: top

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

Moderne Browser: display: flex, display: grid

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 noch mit einer älteren Syntax agieren.

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