Tabellen im Responsive Webdesign

Durch die Einbindung des Scriptes von Zurb ist das Problem "responsiver Tabellen" schnell und effektiv behoben.

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)

Tabelle1 in Desktop-Ansicht

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

Tabelle2 in Desktop-Ansicht

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

Responsive Tabelle3 in Desktop-Ansicht

 


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.

 

Je höher die Prozentzahl, desto höher Ihre Zustimmmung: 0 = überhaupt nicht | 100% = volle Zustimmung

Ø 67% von 3 Bewertungen

50%
 
50%
 

Einen Kommentar schreiben

Kommentar von Shosh |

Mir gefällt nicht, dass ich auf einem kleinen mobilen Endgerät nicht sofort bemerke, dass ich die Ergebnisliste horizontal scrollen kann. sieht für mich erst mal aus, als wären nur drei der Ergebnisspalten angezeigt. Gute Idee mit Optimierungsbedarf.

Latest Security News

PHP 5.6 wird abgeschaltet

Die meisten Provider haben sich in den letzten Monaten dazu entschossen, aus Sicherheitsgründen, die PHP Version 5.6 abzuschalten. Das bedeutet, dass auch Contao Versionen die älter als Version 3.4 sind, ein Update benötigen.

Hallo!

Hier schreibt das Team der Pergamon interactive GmbH über das CMS Contao, SEO, Rechtliches und eigene Projekte. Wir freuen uns über Feedback, Kommentare & Bewertungen.

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.  

Ähnliche Beiträge

Website vor Referrer Spam schützen | So gehts

Website vor Referrer Spam schützen | So gehts

Warum es wichtig ist die eigene Website vor Referrer Spam zu schützen, was genau der Spam mit Ihrer Website macht und wie Sie sich am besten absichern.