Lars: Sind Tabellen responsiv?

problematische Seite

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

--
Nicht die schönste Lösung ist die Beste - die Verständlichste ist es!

akzeptierte Antworten

  1. problematische Seite

    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

    1. problematische Seite

      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

      --
      Nicht die schönste Lösung ist die Beste - die verständlichste ist es!
  2. problematische Seite

    @@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].

    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

    1. don’t repeat yourself ↩︎

    1. problematische Seite

      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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. problematische Seite

        @@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

        --
        “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
    2. problematische Seite

      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

      --
      Nicht die schönste Lösung ist die Beste - die verständlichste ist es!
    3. problematische Seite

      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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.