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
