Tabellen im Responsive Webdesign
Durch die Einbindung des Scriptes von Zurb ist das Problem "responsiver Tabellen" schnell und effektiv behoben.
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
- Code downloaden: http://zurb.com/
- Die CSS und Javascript-Datei "responsive-tables" in das Projekt einbinden.
Im CMS CONTAO funktionert die Einbindung über Themes -> Seitenlayout -> "Eigener JavaScript Code". - Der Tabelle die Klasse "responsive" anhängen.
- Wenn gewünscht, kann jetzt noch über das CSS ein leichter Schatten auf die feste erste Spalte gelegt werden.
Online Website Check
Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.
Hilfe & Support
Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.
Cookie- & Analyse Einstellungen
Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.