CSS display: table, display: 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.

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>

Passt sich vom kleinsten bis zum großen Viewport an und braucht dafür keine Breakpoints.

Listen für kleine, Tabellen für große Monitore

CSS display bestimmt, wie der Block und seine Elemente im Browser gerendert / dargestellt wird und kann das Verhalten des Blocks ändern, so dass z.B. eine ungeordnete Liste ul mit ihren li-Elementen als Tabelle erscheint.

Punkt 1
- Ich bin ein Unterpunkt
- Ich bin auch ein Unterpunkt
Punkt 2
- Ich bin ein Unterpunkt
- Ich bin auch ein Unterpunkt
Punkt 3
- Ich bin ein Unterpunkt
- Ich bin auch ein Unterpunkt

<ul class="listtable">
	<li>Punkt 1
		<ul>
			<li>Ich bin ein Unterpunkt</li>
			<li>Ich bin auch ein Unterpunkt</li>
		</ul>
	</li>
	…
</ul>

CSS

@media (min-width: 640px) {
	ul.listtable {
		display: table;
	}
	
	ul.listtable > li {
		display: table-cell;
	}
	
	ul.listtable ul {
		display:contents
	}
}

Keine perfekte Lösung, um Listen auf kleinen Monitoren sequentiell zu halten und auf großen Monitoren in übersichtliche Tabellen umzugestalten, aber ein Ansatz …

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.

display: table – Bild in einer Tabellenzelle oben

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 viele dieser kleinen Aufgaben, aber display table / table-row / table-cell sind einfach, brauchen nur ein minimales Markup und minimales CSS und funktionieren in allen Browsern.

Picossi

1929 - 1999

Enim eiusmod high life mainus Picasso ad squid. Spainsdomus high noon officia.

Büccioni

1962 - 2009

Flooter boot quinoa rasant eiusmod. Boccioni nelle la protection des données de l'entreprise.

Mindirane

1919 - 2000

Lorsque vous visitez notre site Mondrian occu luomi tapesteri accidental.

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