Responsive Tabellen

Tabellen für Vergleiche

Mit CSS lassen sich einfache Tabellen von mittlerer Größe übersichtlich gestalten, aber ihnen wird angelastet, dass ihre Inhalte im Quellcode nicht linear sind, weil sie Zeile für Zeile notiert sind, und kaum die die Viewports der mobilen Geräte geeignet sind. Der überwiegende Teil aller Webseiten landet letztendlich eher auf einem Handy als auf einem Desktop-Monitor. So werden Tabellen mehr und mehr von kleinen Päckchen – Cards – ersetzt, die auf kleinen Monitoren ein Karussel bilden oder untereinander liegen, auf großen Monitoren nebeneinander liegen.

Rotes A

Tim und Struppi

Smarte Bücher

Kraut und Rüben

Beispiel CSS scroll-snap: Auf kleinen Monitoren ein Karussel, auf großen Monitoren eine Tabellenstruktur.

Andererseits sind Tabellen immer noch die beste Struktur, um Eigenschaften von beliebigen Dingen miteinander zu vergleichen.

Es gibt viele mehr oder minder einfache und raffinierte Verfahren für responsive Tabellen:

1. td { display: list-item; } stellt die Zeilen der Tabelle als Listenelemente dar,
2. Die komplette Tabelle mit overflow : scroll scrollen lassen,
3. Die Zahl der Spalten auf kleinen Monitoren reduzieren und nur die wichtigsten Spalten anzeigen,
4. Einsatz von Grafiken – z.B. Tortendiagrammen oder Graphiken – anstelle von Tabellen,
5. die Tabelle umdrehen, Kopfzeilen auf die Seite bringen und die Spalten scrollen.

display: list-item listet die Zellen einer Zeile nacheinander statt nebeneinander und ist eine elegante und einfache Lösung.

table responsive mit overflow : scroll

overflow : scroll bietet ein einfaches Verfahren, um übergroße Tabellen auch für die kleinen Monitore von mobilen Geräten ohne Kürzung des Inhalts anzuzeigen.

Diese Lösung ist eine der stabilsten und gleichzeitig einfachsten Lösungen. Am besten bringt man Tabellen in einem div-Block unter, der von einfachen CSS-Regeln im Raster gehalten wird.

Art. Nr.	Beschreibung	Bereitstellung	VE	Preis in €/VE 1 VE ab 10 VE
VC0800050	0,7ml Klarglas, flacher Boden 40 x 7mm	Mittwochs	100	15,10 €	13,50 €
VC0801050	0,7ml Braunglas, flacher Boden 40 x 7mm	nur im Dezember	100	15,90 €	14,50 €
VC0800735	0,3ml Klarglas, runder Boden 31,5 x 5,5mm	ganzjährig	100	17,00 €	14,00 €
VC0800730	0,3ml Klarglas, konisch 31,5 x 5,5mm	Montags und Mittwochs	100	16,60 €	13,80 €

.tableresp { 
    width: 100%; 
    overflow: auto;
}

Dem Benutzer muss deutlich gemacht werden, dass die Tabelle überbreit ist und er den Inhalt scrollen kann, denn viele Browser zeigen bei overflow: auto Scrollleisten nicht automatisch: Scrollbar – die Scrollleiste

.tableresp::-webkit-scrollbar{
	appearance: none;
	width: 14px;
	height: 14px;
}

.tableresp::-webkit-scrollbar-thumb{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
}

Tabellenspalten senkrecht beschriften

writing-mode dreht den Text innerhalb einer Zeilen, so dass er von oben nach unten läuft. Das spart Platz in Tabellenspalten, in denen der Tabellenkopf breiter läuft als die Texte.

th {
   vertical-align: top; 
   text-align: right;
}

th span { 
   writing-mode: vertical-rl; 
   transform: rotate(180deg);
   white-space: pre;
}  
.rowspan span { 
   vertical-align: top; 
   writing-mode: vertical-rl; 
   transform: rotate(180deg);
}
td[rowspan] {
   min-width:2em;
   background-color: hsl(10,40%,90%);
}

Damit writing-mode in Safari greift, wird writing-mode nicht direkt für th bzw. td angegeben, sondern der Text wird in ein span oder em gesetzt.

IE 11 braucht noch die alte CSS-Notation: writing-mode : tb-rl;

Daneben hilft auch text overflow, die Überbreite z.B. von Tabellenheadern in Schacht zu halten.

Spalten reduzieren

Nicht nur das Layout einer Webseite muss responsive werden, um den Anforderungen der unterschiedlichen Monitore gewachsen (bzw. geschrumpft) zu sein. Das Anpassen der Inhalte an Handy, Tablett, kleine und große Monitore ist Feinarbeit.

Eigentlich passen sich Tabellen automatisch an den verfügbaren Platz an, aber wenn der Platz zu schmal wird, zerquetscht die Tabelle die Inhalte.

Spalten fallen lassen ist eine Technik, um Tabellen an den schmalen Platz auf kleinen Monitoren anzupassen: Spalten mit weniger wichtigem Inhalt werden auf kleinen Monitoren nicht angezeigt.

// Mobile first
.hc td:nth-child(3),
.hc th:nth-child(3),
.hc td:nth-child(4),
.hc th:nth-child(4) {display:none}

@media only screen and (min-width:480px) {
.hc td:nth-child(3),
.hc th:nth-child(3) {display:block; display:table-cell}
}

@media only screen and (min-width:720px) {
.hc td:nth-child(4),
.hc th:nth-child(4) {display:block; display:table-cell}
}

Wenn Tabellenzellen beim Vergrößern des Browserfensters nicht sauber hervorkommen, verhilft display:table-cell der Tabelle wieder zu ausgerichteten Rahmen.

Elegant mit Javascript

Wenn größere Datenmengen wie z.B. umfangreiche Statistiken tabellarisch dargestellt werden, ist CSS allein überfordert. Javascript kann elegante Lösungen für große Datenmengen auf kleine Monitore bringen und dabei ein hohes Maß an Komfort bringen.

Ein Beispiel ist filamentgroup/tablesaw, eine kleine Library speziell für responsive Tabellen.