Sind Tabellen responsiv?

[Lars]

Hallo allerseits,

Erneut weiß ich nicht mehr weiter:

ich habe eine Tabelle mit 4 Spalten, es geht dabei um eine Auflistung diverser Feuerwehreinsätze. Bei ausreichendem Viewport ist die auch recht übersichtlich, schlimmer wird es bei Geräten mit kleinerem Display. Ich habe die Seite fürs erste in einem nicht indexierten Verzeichniss hochgeladen, um besser zeigen zu können, was ich meine.

Noch schnell bevor ich darauf hingewiesen werde: Die Jahresauswahl wird noch verbessert, das hier ist die Rohfassung - die Tabelle sollte aber schon so bleiben (bis auf die Thematik oben).

Gruß Lars

[JürgenB]

Hallo Lars,

hier habe ich eine Tabelle, die bei schmalen Viewports umformatiert wird:

https://www.j-berkemeier.de/TableSort_Beispiel3.html

Die Seite ist eigentlich ein Performance-Test für den Tabellensortierer und die recht große Tabelle wird per Javascript erstellt, daher hier noch ein Auszug aus dem Quelltext:

/* Responsive Tabelle */
@media screen and (max-width: 50em) {
	.restab, .restab caption, .restab thead, .restab tbody, .restab tfoot, .restab tr { display: block; }
	.restab, .restab td, .restab th { margin:0 }
	.restab tr { border-bottom: 2px solid #000; }
	/* .restab td:nth-child(1), .restab th:nth-child(1) { display:block } */
	.restab td::before { content: attr(title)": "; }
	.restab tfoot td::before { content: ""; }
	.restab td, .restab th { display: inline-block; padding: .2em; text-align: left; }
	.restab td, .restab th { min-width: 40%; }
	.restab th { margin-right: -0.2em; }
}
@media screen and (max-width: 33em) {
	.restab td, .restab th { display: block; }
}

<table id="T1" class="restab">
 <thead>
  <tr>
   <th class="sortierbar">Spalte 1</th>
   <th class="sortierbar sortiere+">Spalte 2</th>
   <th class="sortierbar">Spalte 3</th>
   <th class="sortierbar">Spalte 4</th>
   <th class="sortierbar">Spalte 5</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td title="Spalte 1">239</td>
   <td title="Spalte 2">1.1969160583467087</td>
   <td title="Spalte 3">228.97249171078371 x</td>
   <td title="Spalte 4">6. 12. 1996</td>
   <td title="Spalte 5">jCD</td>
  </tr>
  <tr>
   <td title="Spalte 1">-12</td>
   <td title="Spalte 2">1.19931742939261</td>
   <td title="Spalte 3">7.10680045343437 x</td>
   <td title="Spalte 4">31. 7. 2009</td>
   <td title="Spalte 5">7af</td></tr>
...

Die Tabellenelemente werden je nach Breite zu Inline-Blockelementen oder Blockelementen gemacht und so neben oder untereinander angeordnet. Um die Zuordnung zu den Spaltenüberschriften zu behalten, hat jede Zelle ihre Spaltenüberschrift als title-Attribut bekommen. Per css wird bei schmalen Viewports das title-Attribut dann angezeigt.

Sie es dir mal an. Dazu musst du das Browserfenster schmaler oder breiter machen.

Ich habe die Breakpoints auf 33 und 50 em gelegt, weil das bei mir so passt. Du müsstest das bei dir anpassen.

Gruß
Jürgen

[Lars]

Hallo Jürgen,

das mag ja wunderbar funktionieren, leider habe ich von Java mal gar keine Ahnung und ich versuche die Website möglichst nur mit Code zu schreiben, den ich auch verstehen kann.

Danke trotzdem für deine Antwort

Gruß Lars

[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 (mit class-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

---

1. don’t repeat yourself ↩︎

[Matthias Apsel]

Hallo Gunnar Bittersmann,

• 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.

Was spricht dagegen, die Beschriftungen ins Style-Sheet zu schreiben? Ausschließlich die Wartbarkeit?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Was spricht dagegen, die Beschriftungen ins Style-Sheet zu schreiben?

Inhalte gehören ins Markup.

Ausschließlich die Wartbarkeit?

Wenn sich eine Beschriftung ändert, will man das nicht an zwei getrennten Stellen tun müssen.

Das ist schon Grund genug, die Beschriftungen im Markup unterzubringen, dass es müßig ist zu überlegen, ob das der einzige Grund ist.

😷 LLAP

[Lars]

Hallo Gunnar,

Ähm, nein, da solltest du nochmal ran: Textausrichtung, zu viele Linien.

Schade eigentlich, aber ich sehe ein, dass die Tabelle tatsächlich unübersichtlich ist. Auch doof, dass mir die Seite nicht von google rausgeschmissen wurde, da hätten wir uns den Thread sparen können 😉.

Ich setzte jetzt direkt mal den 2. Vorschlag um und bedanke mich erneut.

Gruß Lars

[Matthias Apsel]

Hallo Gunnar Bittersmann,

• 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 (mit class-Attributen, hm), was aber insbesondere bei größeren Tabellen ziemlich blöd ist.

Damals (2014) war es mit den data-*-Attributen oder gar custom properties noch nicht so weit her.

Aber nun ist der Artikel angepasst.

Bis demnächst
Matthias