Nicht-Responsive Tabellen können einem schnell das responsive Webdesign kaputt machen und sorgen für ein unschönes Gesamtbild und schlechte Usability. Daher möchte ich euch einmal zeigen wie man eine responsive Tabellen ziemlich einfach anlegt um die genannten Punkte zu vermeiden.
Responsive Tabellen mit CSS
Das gewünschte Ergebnis:
| Leistung | Preis | Infolink |
|---|---|---|
| Facebook Fan-Page | 249.- | Mehr Infos |
| Facebook – Betreuung | 149.- | Mehr Infos |
| Facebook Betreuung | ab 199.- / Monat | Mehr Infos |
Der HTML Code für genau diese responsive Tabelle jedoch ohne die eingebundenen Links ist:
See the Pen
Responsive table with HTML & CSS by Atilla Boz (@great2gether)
on CodePen.
Und der zugehörige CSS Code wird sichtbar wenn ihr auf den Reiter CSS klickt.
4-spaltig könnte das ganze dann so aussehen:
| Portalname | Potentielle Kunden in Deutschland | Geeignet für… | An Shopware anbindbar? |
|---|---|---|---|
| Amazon | 46 Millionen | Händler jeder Größe, die sowohl Massenprodukte, als auch Nischenprodukte verkaufen |
Ja, per Multichannel-Plugin, z. B. magnalister |
| ebay | 16,5 Millionen | Händler jeder Größe, die neue und gebrauchte Waren verkaufen |
Ja, per Multichannel-Plugin, z. B. magnalister |
In diesem Beispiel wurde bei der Tabelle im äußersten div zusätzlich (!) die Klasse g2g-respo-table-200 verwendet. Diese bewirkt dass jede Zeile 200px hoch ist + die linke Seite mehr Breite hat.
See the Pen
Responsive table with HTML & CSS by Atilla Boz (@great2gether)
on CodePen.
Quellen:
http://www.smashingmagazine.com/2008/08/top-10-css-table-designs/5/
http://blog.kulturbanause.de/2012/06/tabellen-im-responsive-webdesign/
http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp
Danke
Gerne. Darf`s sonst noch was sein?
Endlich mal eine wirklich funktionierende Lösung für eine responsive Tabelle.
Das einzige was mir noch nicht so ganz gefällt ist, dass die Border in der responsive Ansicht 2px breit sind. Ich habe noch keinen Weg gefunden um das auf 1px zu ändern.
Git es dafür eine Lösung?
Mit freundlichen Grüßen
Henning Hahn
Hallo Henning,
dafür habe ich einen Weg gefunden. ;-) Hab den Code angepasst. Sieht auf jeden Fall besser aus wenn es nur ein Pixel ist.
Danke für das Feedback und deine zukünftige positive Bewertung auf ProvenExpert. ^^
*Wink mit dem Zaunpfahl.*
Hübsch.
Problem: Wenn der Inhalt einer Zelle so lange ist, dass ein Zeilenumbruch erzwungen wird, dann zerfällt die mobile Ansicht. Der Text umflißt den mittels ::before erzeugten Zeilenkopf.
Guckst du unten in den Kommentaren gibt es eine neue Version.
BTW: Deine Lösung ist nicht barrierefrei. D.h. User mit Screenreader sehen die Tabelle einfach nicht.
NB: Auch wenn meine Kommentare in der Moderation „hängen bleiben“, der Verfasser wird sie hoffentlich lesen.
*Gesehen* – ja an den Screenreader wurde hier tatsächlich nicht gedacht. Haben Sie Beispiele von Tabellen die es korrekt umgesetzt haben?
Wenn in einer Spalte rechts zu viel Inhalt ist, dann ist die linke neue :before Spalte zu klein.
Ok – an alle Freunde der responsive Tabellen. Ich hab noch einmal eine brandneue Version der zweispaltigen Version gemacht.
Das ganze dann auch als CSS oder wahlweise SCSS:
https://codepen.io/great2gether/pen/xxQQbEa
https://codepen.io/great2gether/pen/ZEmmEML