Tabellen für responsives Design
Nachfolgende Tabellen sind auf zwei unterschiedliche Arten für mobile Endgeräte optimiert. Sichtbar wird der Effekt natürlich erst, wenn man das Browser-Fenster verkleinert oder ein Smartphone nutzt.
1. Mit CSS umstrukturierte Tabelle in mobiler Version (kleiner 767px Breite)
| Tabellenüberschriften | Produkt 1 | Produkt 2 | Produkt 3 |
|---|---|---|---|
| Produktname | Produktname 1 | Produktname 2 | Produktname 3 |
| Produktart | Art 1 | Art 2 | Art 3 |
| Produktpreis |
2,00 € / Monat
(24,00 € / Jahr)
|
1,00 € / Monat
(12 € / Jahr)
|
1,50 € / Monat
(18,00 € / Jahr)
|
| Prospekt als PDF zum Download |
Link 1 | Link 2 | Link 2 |
|
detaillierte Produktinformationen |
Info zu Produkt 1 | Info zu Produkt 2 | Info zu Produkt 3 |
Zwischenüberschrift h4 |
|||
| Merkmal 1 | rot | grün | blau |
Zwischenüberschrift h4 |
|||
|
Attribut 1
|
ja |
ja
|
ja
|
|
Attribut 2
|
nein |
ja
|
nein
|
| Attribut 3 | ja | nein | nein |
| Attribut 4 | ja | ja | ja |
2. Scrollbare Tabelle
| Tabellenüberschriften | Produkt 1 | Produkt 2 | Produkt 3 |
|---|---|---|---|
| Produktname | Produktname 1 | Produktname 2 | Produktname 3 |
| Produktart | Art 1 | Art 2 | Art 3 |
| Produktpreis |
2,00 € / Monat
(24,00 € / Jahr)
|
1,00 € / Monat
(12 € / Jahr)
|
1,50 € / Monat
(18,00 € / Jahr)
|
| Prospekt als PDF zum Download |
Link 1 | Link 2 | Link 2 |
|
detaillierte Produktinformationen |
Info zu Produkt 1 | Info zu Produkt 2 | Info zu Produkt 3 |
Zwischenüberschrift h4 |
|||
| Merkmal 1 | rot | grün | blau |
Zwischenüberschrift h4 |
|||
|
Attribut 1
|
ja |
ja
|
ja
|
|
Attribut 2
|
nein |
ja
|
nein
|
| Attribut 3 | ja | nein | nein |
| Attribut 4 | ja | ja | ja |
