nicht angemeldet
Gunnar Bittersmann@@Lars
Bei ausreichendem Viewport ist die [Tabelle] auch recht übersichtlich, schlimmer wird es bei Geräten mit kleinerem Display.
Da gibt’s prinzipiell zwei Möglichkeiten:
-
Tabelle so lassen und horizontal scrollbar machen – aber nur die Tabelle.
-
Die Daten auf kleinen Viewports nicht als Tabelle anzeigen lassen, sondern die als Blöcke untereinander. Um die Verständlichkeit zu gewährleisten muss dann die Beschriftung der Daten (Tabellenzellen) in jedem Block wiederholt werden. Beispiel.
In deinem Fall scheint mir die zweite Variante sinnvoller.
Wie bekommt man nun die Beschriftung an die Daten? Auch dafür gibt es mehrere Möglichkeiten: schlechte und gute.
- Man schreibt den Titel bei jedem
td-Element in ein Attribut (data-*bietet sich an) und generiert daraus auf schmalen Viewports die Beschriftung. So wird’s im Beispiel im SELFHTML-Wiki gemacht (mitclass-Attributen, hm), was aber insbesondere bei größeren Tabellen ziemlich blöd ist. Nicht DRY[1].
-
Man schreibt die Beschriftungen in einen
style-Block. (Die Beschriftungen gehören natürlich ins Markup, nicht ins Stylesheet!) Dann hat man die Beschriftungen nur noch doppelt, nicht mehr zigfach. -
Saubereren Code erhält man, wenn man dafür custom properties verwendet.
-
Man doppelt die Beschriftungen gar nicht, sondern regelt das per JavaScript – ein Script setzt die custom properties entsprechend.
S.a. diesen Thread. (Ich bin jetzt nicht sicher, ob sich der dort angesprochene Firefox-Bug erledigt hat; das Ticket ist jedenfalls noch offen.)
das hier ist die Rohfassung - die Tabelle sollte aber schon so bleiben
Ähm, nein, da solltest du nochmal ran: Textausrichtung, zu viele Linien.
😷 LLAP
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
don’t repeat yourself ↩︎
JürgenB
Matthias Apsel