Responsive Tabellen

Tabellen und tabellarische Daten an kleine Monitore anpassen

Große Tabellen brauchen eine Sonderbehandlung, damit sie im ViewPort kleiner Monitore übersichtlich und dennoch lesbar bleiben. Die eine Superlösung für alle Fälle gibt es nicht, denn responsive Tabellen sind immer inviduelle Lösungen.

Mit CSS lassen sich einfache Tabellen von mittlerer Größe übersichtlich gestalten, aber auch der Einsatz von Javascript kann sinnvoll sein.

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

  1. Die komplette Tabelle mit overflow : scroll scrollen lassen.
  2. Die Zahl der Spalten auf kleinen Monitoren reduzieren und nur die wichtigsten Spalten anzeigen,
  3. Einsatz von Grafiken – z.B. Tortendiagrammen oder Graphiken – anstelle von Tabellen,
  4. die Tabelle umdrehen, Kopfzeilen auf die Seite bringen und die Spalten scrollen,

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 € Beispiel: HTML table mit col und colgroup
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 € Beispiel: HTML table mit col und colgroup
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 mit overflow: auto die Scrollleisten nicht automatisch.

Scrollleisten sichtbar machen
.tableresp::-webkit-scrollbar{
	-webkit-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.

Name Formel Ionenradius
X+ in pm
Gitterenthalpie
einwertige Alkalimetall-Kationen Lithiumfluorid LiF 74 1039
Natriumfluorid NaF 102 920
Rubidiumfluorid RbF 149 780
Caesiumfluorid CsF 170 749
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.

Eigenschaft Beschreibung Werte erblich
transition ändert den Wert einer CSS-Eigenschaft über die Zeit transition-property, transition, transition-duration nein
@keyframes Animationen auf Basis von transform animation-name,animation-duration, animation-iteration-count nein
text-shadow Schatten hinter Text (Drop-Shadow) horizontaler Versatz, vertikaler Versatz, Verlaufs-Radius des Schattens nein
// 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.

label Visiten Summe 1 Generierung Min. Generierung Sorten Zweitfarbe Preis Anfänglich
Farben 5698 277144 6299 0.001 Lapson Suchung Dunkler Pfirsich 247,90 € 295824
Segmente 3211 293489 3504 0.001 Darjeeling Dunkelbraun 147,90 € 226765
Mineral 2755 137127 3063 0.001 Roibos farblos 122,00 € 139828
Mobilität 2385 199391 2539 0.001 Earl Gray Hell, fast weiß 97,99 € 218098
CSS tables