responsive Tabellen
Original
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
|---|---|---|---|---|---|---|---|
| Zeile 01: Feld 1 | Zeile 01: Feld 2 | Zeile 01: Feld 3 | Zeile 01: Feld 4 | Zeile 01: Feld 5 | Zeile 01: Feld 6 | Zeile 01: Feld 7 | Zeile 01: Feld 8 |
| Zeile 02: Feld 1 | Zeile 02: Feld 2 | Zeile 02: Feld 3 | Zeile 02: Feld 4 | Zeile 02: Feld 5 | Zeile 02: Feld 6 | Zeile 02: Feld 7 | Zeile 02: Feld 8 |
| Zeile 03: Feld 1 | Zeile 03: Feld 2 | Zeile 03: Feld 3 | Zeile 03: Feld 4 | Zeile 03: Feld 5 | Zeile 03: Feld 6 | Zeile 03: Feld 7 | Zeile 03: Feld 8 |
| Zeile 04: Feld 1 | Zeile 04: Feld 2 | Zeile 04: Feld 3 | Zeile 04: Feld 4 | Zeile 04: Feld 5 | Zeile 04: Feld 6 | Zeile 04: Feld 7 | Zeile 04: Feld 8 |
| Zeile 05: Feld 1 | Zeile 05: Feld 2 | Zeile 05: Feld 3 | Zeile 05: Feld 4 | Zeile 05: Feld 5 | Zeile 05: Feld 6 | Zeile 05: Feld 7 | Zeile 05: Feld 8 |
| Zeile 06: Feld 1 | Zeile 06: Feld 2 | Zeile 06: Feld 3 | Zeile 06: Feld 4 | Zeile 06: Feld 5 | Zeile 06: Feld 6 | Zeile 06: Feld 7 | Zeile 06: Feld 8 |
| Zeile 07: Feld 1 | Zeile 07: Feld 2 | Zeile 07: Feld 3 | Zeile 07: Feld 4 | Zeile 07: Feld 5 | Zeile 07: Feld 6 | Zeile 07: Feld 7 | Zeile 07: Feld 8 |
| Zeile 08: Feld 1 | Zeile 08: Feld 2 | Zeile 08: Feld 3 | Zeile 08: Feld 4 | Zeile 08: Feld 5 | Zeile 08: Feld 6 | Zeile 08: Feld 7 | Zeile 08: Feld 8 |
| Zeile 09: Feld 1 | Zeile 09: Feld 2 | Zeile 09: Feld 3 | Zeile 09: Feld 4 | Zeile 09: Feld 5 | Zeile 09: Feld 6 | Zeile 09: Feld 7 | Zeile 09: Feld 8 |
| Zeile 10: Feld 1 | Zeile 10: Feld 2 | Zeile 10: Feld 3 | Zeile 10: Feld 4 | Zeile 10: Feld 5 | Zeile 10: Feld 6 | Zeile 10: Feld 7 | Zeile 10: Feld 8 |
| Zeile 11: Feld 1 | Zeile 11: Feld 2 | Zeile 11: Feld 3 | Zeile 11: Feld 4 | Zeile 11: Feld 5 | Zeile 11: Feld 6 | Zeile 11: Feld 7 | Zeile 11: Feld 8 |
| Zeile 12: Feld 1 | Zeile 12: Feld 2 | Zeile 12: Feld 3 | Zeile 12: Feld 4 | Zeile 12: Feld 5 | Zeile 12: Feld 6 | Zeile 12: Feld 7 | Zeile 12: Feld 8 |
Diese Kopie der 1. Tabelle kann horizontal gescrollt werden
In diese Kopie der 1. Tabelle werden unwichtige Spalten werden ausgeblendet und nur bei Bedarf angezeigt
Alle Spalten anzeigen?
Bei diese Kopie der 1. Tabelle wird die Struktur umgebaut (nicht der Inhalt!). Der Header wird für jede Zeile wiederholt und die Daten werden nicht mehr tabellarisch, sondern als Key-Value-Paare dargestellt
Im realen Einsatz kann man mehrere an die Displaybreite angepasste Tabellenversionen anbieten. Dazu wird beim Laden der Seite die Größe des Displays abgefragt.
Diese Kopie der 1. Tabelle ist eine sogenannte Data Table
Man kann die Tabelle oder die ausgewählten Zeilen in die Zwischenablage kopieren, drucken oder speichern.
Für das Abspeichern stehen die Optionen PDF, Excel und CSV (comma seperated value) zur Verfügung.
Durch Klicken auf die kleinen Dreiecke im Kopf der Tabelle kann man die Spaltensortierung ändern.
Man kann eine oder beliebig viele Zeilen markieren (z.B. um die Auswahl zu exportieren oder auszudrucken.
Lange Tabellen werden auf mehrere Seiten aufgeteilt, zu denen man blättern kann, und es gibt eine Suchfunktion.
Zahlen können im europäischen Modus, also mit Komma als Dezimaltrenner und mit Punkt zum Trennen der Tausender verwendet werden.
Diese Tabelle bezieht ihre Daten aus einer JSON-Datei
Hier sind HTML-Code und Daten getrennt. Die Tabelle wird zur Data Table gemacht.
Hier wird die Tabelle angezeigt. Nach einem Klick auf den Button wird eine JSON-Datei geladen und
aus den darin enthaltenen Daten eine Tabelle erstellt und an diese Stelle positioniert.