Tabellen im Responsive Webdesign

Tabellen und Responsive Webdesign passen irgendwie nicht gut zusammen.

Dabei sind Tabellen zur Darstellung umfangreicher Datenmengen eigentlich gut geeignet und oft genug nicht so einfach zu ersetzen. Doch was auf dem Desktop-Schirm noch gut funktioniert, kann im responsiven Layout zum Problem werden oder den ambitionierten Entwickler direkt zur Verzweiflung treiben. 

Hier sind Kompromisse gefragt, um eine optimierte Darstellung zu erhalten; z.B. können Inhalte ausgeblendet werden.
Wer jedoch alle Inhalte benötigt, kann auf die schöne Lösung der Entwickler von Zurb zurück greifen.

Durch die Einbindung des Scriptes von Zurb ist das Problem "responsiver Tabellen" schnell und effektiv behoben. Die Funktionsweise ist so simpel, wie genial. Ab einer gewissen Bildschirmgröße wird die erste Spalte der Tabelle auf eine eigene Ebene ausgelagert und fest positioniert, die anderen Spalten können horizontal darunter gescrollt werden.
Anhand der Tabelle auf unserem Formel E Portal zeigen wir euch, wie das funktioniert.

 

---

BEISPIEL IM LAYOUT

Hier seht ihr die Tabelle auf einer großen Desktop-Ansicht (Bild 1)

Auf einem kleinen Bildschirm wird die Tabelle aufgrund mangelnden Platzes auf der rechten Seite einfach abgeschnitten.

Durch den Code wird nun folgender Effekt erreicht.
Die erste wichtige Spalte bleibt stehen, während die restlichen darunter horizontal bewegbar sind.

 

---

LIVE DEMO

Hier kann man sich das Resultat direkt im im Browser ansehen: Formel E Portal 

 

---

SO WIRD DIE TABELLE RESPONSIVE

1. Code downloaden: http://zurb.com/
   
2. Die CSS und Javascript-Datei "responsive-tables" in das Projekt einbinden.
   Im CMS CONTAO funktionert die Einbindung über Themes -> Seitenlayout -> "Eigener JavaScript Code".
3. Der Tabelle die Klasse "responsive" anhängen.
4. Wenn gewünscht, kann jetzt noch über das CSS ein leichter Schatten auf die feste erste Spalte gelegt werden.