CSS/Eigenschaften/display: table
- 10min
- leicht
HTML-Tabellen sind die semantisch passende Struktur, um tabellarische Daten in Zeilen und Spalten darzustellen.
Manchmal will man jedoch auch anderes wie Listen in sauberen Spalten präsentieren. Mit den Eigenschaften display: table-* können mit Nicht-Tabellen-Elementen Tabellen bzw. Raster erstellt werden. Die entsprechenden Angaben lassen sich ebenso auf HTML-Tabellenelemente anwenden.
<style>
div.table {
display: table;
border-collapse:collapse;
}
div.tr {
display:table-row;
}
div.td {
display:table-cell;
border:thin solid red;
padding:5px;
}
</style>
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div>
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.
Folgende Angaben sind in diesem Zusammenhang möglich:
-
table: Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML. -
inline-table: Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline. -
table-row: Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML. -
table-cell: Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML. -
table-row-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML. -
table-header-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML. -
table-footer-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML. -
table-column: Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML. -
table-column-group:Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML. -
table-caption: Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).
--Matthias Scharwies (Diskussion) 14:03, 13. Jun. 2020 (CEST)
Rasterlayout mit display:table-cell
<style>
div.table {
display: table;
width: calc(100% - 1em);
border: thin solid steelblue;
padding: 5px;
}
div.spalte {
display: table-cell;
border: thin solid red;
width: 200px;
padding: 5px;
}
</style>
<div class="table">
<div class="spalte">Ich bin eine Spalte.</div>
<div class="spalte">Ich bin eine zweite Spalte.</div>
<div class="spalte">Ich bin eine dritte Spalte mit noch mehr Inhalt.</div>
<div class="spalte">Ich bin eine vierte Spalte.
<br>
<br>
Ein Vorteil von display:table ist, dass sich das Layout der Spalten
automatisch an die Höhe der Spalten anpasst.
</div>
</div>
Die vier Tabellenzellen passen sich nun als Spalten an die maximale Breite des Elternelements an. Ein schöner Nebeneffekt ist, dass alle Spalten automatisch gleich hoch sind, was bei einem Layout mit float nur durch Angabe einer festen Höhe (height oder min-height) möglich wäre.
Siehe auch
- Tabelle in HTML
- Aufbau
- Gestaltung mit CSS
- Einstieg in Grid Layout
- Grid-Container + Grid-Items (Rasterelemente)
- benannte Linien und Rasterbereiche
- Responsive Raster ohne Media Queries
- Ausrichtung von Grid-Items
- Web Components/Custom Elements
Listen im Tabellen-Look - HTML/Tutorials/Listen/Gestaltung mit CSS
alternative Umsetzung mit display: table-cell - vertikal zentrieren mit
display:table-cell
