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-Tabellenzeilen immer alle Zellen gleich hoch sind.
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
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.
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.
Proin pellentesque aliquam.
Vehicula ac rutrum ut
Donec arcu odio
Details
Details
Proin pellentesque aliquam.
Donec arcu odio, vehicula ac rutrum ut
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).