Tabellen in responsiven Webseiten

In diesem Abschnitt widme ich mich der Darstellung von Tabellen in responsiven Webseiten. Es geht dabei nicht darum, HTML-Tabellen wieder als Grundlage des allgemeinen Design zu reanimieren. Diese Herangehensweise ist nun wirklich lange passe. Vielmehr geht es darum, Datentabellen (ggf. bereits vorhandene) so darzustellen, dass sie sich gut in eine responsive Webseite einfügen.

jQuery-Plugin Responive Tables

Bei Zurb (den Machern des Frameworks Foundation) findet man das jQuery-Plugin Responsive Tables. Diese Plugin macht einen Teil der Tabelle scrollbar. Beispiel zum jQuery-Plugin Responive Tables

Obwohl alle Beispiele auf der Website von Zurb mit dem Framework Foundation erstellt wurden, kann man dieses jQuery Plugin mit allen responsiven Webseiten verwenden. Ein wesentlicher Vorteil dieser Variante ist, dass der HTML-Code der eigentlichen Tabelle nicht verändert werden muss.

Anmerkungen

Diese Variante funktioniert mit meinen Testgeräten nicht immer. Grundsätzlich wird die horizontale Scrollleiste nicht angezeigt, das horizontale Scrollen erfolgt mit Hilfe der Wischgeste. Mit dem Standardbrowser eines Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) klappt dies jedoch nicht.

jQuery-Plugin FooTable

Dieses Plugin ist eines der vielen Plugins von FooPlugins.

jQuery-Plugin TableSaw

Hier handelt es sich um ein ganzes Bündle von jQury-Plugins. Mehr siehe https://github.com/filamentgroup/tablesaw

Reine CSS-Lösung von Chris Coyier auf css-tricks.com

Diese Lösung hat den Vorteil, dass wirklich nur der CSS-Code ergänzt werden muss.

Beispiel ansehen

Anmerkungen

  1. Mit dem Standardbrowser eines Samsung Galaxy S2 mit Android 4.1.1. (Genymotion virtuelle Maschine) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding werden die Inhalte nicht zentriert dargestellt, rechts bleibt ein breiter Rand. Hier besteht noch Optimierungspotential.
  2. Mit Firefox auf einem Samsung Galaxy S2 mit Android 4.1.1. (Genymotion virtuelle Maschine) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding bleibt ein breiter Rand links und rechts. Hier besteht noch Optimierungspotential.
  3. Mit dem Standardbrowser eines Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding werden die Inhalte (analog zu Pkt. 1) nicht zentriert dargestellt, rechts bleibt ein breiter Rand. Hier besteht noch Optimierungspotential.
  4. Mit Firefox auf einem Samsung Galaxy S 9000 mit Android 2.3.6. (echtes Gerät) funktioniert diese Variante. Auch in der Landscape-Ansicht ist die Darstellung akzeptabel, allerding bleibt (analog zu Pkt.2) ein breiter Rand links und rechts. Hier besteht noch Optimierungspotential.

Diese Methode setzte ich auch in der Praxis ein. Zurzeit ist die Darstellung bei allen Tests allerdings noch sehr mangelhaft.