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

CSS display table: gleiche Höhe, mittig

display: table, display: table-row und table-cell borgen bei der Darstellung von Tabellen: dieselbe Höhe Zeilen, vertikal zentrieren. Auch wenn HTML-Tabellen für das Layout von Webseiten out und tabu sind: CSS-Tabellen per display table holen die nützlichen Eigenschaften von Tabellen hervor und leihen sie dem div-Tag.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 ausrichtet, pickt sich die Kombination aus Media Queries und CSS display die fast vergessen Rosinen von Tabellenelementen heraus. 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 Tricks funktioniert.

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
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..
display: table – Bild in einer Tabellenzelle oben Phasellus non vulputate magna, vitae tincidunt felis.
display: table – Bild in einer Tabellenzelle oben Vestibulum id sodales eros, ac tristique quam. Pellentesque vel tortor leo. Morbi ornare feugiat justo eu consectetur.

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

display: table-cell bottom

Candy toffee croissant pudding chocolate bar candy canes.

vertical-align: middle

display: table-cell middle

Bonbon chupa chups ice cream toffee macaroon liquorice sesame

vertical-align: top

display: table-cell top

Bear claw gingerbread gummi bears marshmallow jujubes sesame snaps cheesecake jelly. Take toffee chupa.

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.

art-picasso

Picossi

1929 - 1999

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

art-boccioni

Büccioni

1962 - 2009

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

art-boccioni

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