Responsive Tabellen

Responsive Tabellen sind gar nicht so schwer umzusetzen wie gedacht. Webseiten die auch für mobile Endgeräte verfügbar sein sollen benötigen ein responsives Layout. Dieses passt sich optimal an die jeweilige Bildschirmauflösung an. Gerade Tabellen waren dabei immer schon ein Problem. Bis jetzt. Ich zeige euch wie man responsive Tabellen ausschließlich über CSS implementiert.

Responsive Tabellen

Tabellen passen sich eigentlich schon automatisch sehr gut an die jeweilige Bildschirmgröße an. Eine table mit 100 prozentiger Breite passt sich immer der Fensterbreite an. Ohne weiterer Optimierung passen sich die Spalten in der Breite an den Inhalt an. Ändert sich die Fenstergröße so orientiert sich auch der Inhalt sehr schön fließend am neuen Layout. Eigentlich ideal wäre da nicht das Problem, wenn in einer Zeile mehr Inhalt dargestellt werden soll als Platz verfügbar ist. Dann wird nämlich das Tabellendesign hässlich. Richtig hässlich. Zuerst werden die einzelnen Wörter noch halbwegs gut abgebrochen und in weiteren Zeilen eingeordnet. Irgendwann im schlimmsten Fall hat man dann nur noch 1 Zeichen pro Zeile oder aber die Spalteninhalte überschneiden sich. So eine Tabelle ist nicht zu gebrauchen. Ich gehe beispielhaft von folgender Tabelle aus:

<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Name</th>
      <th>Preis</th>
      <th>Aktionszeitraum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="SKU">TEV1004596</td>
      <td data-label="Name">40 Zoll 3D TV Gerät</td>
      <td data-label="Preis">359,80 €</td>
      <td data-label="Aktionszeitraum">01.01.2015 - 31.01.2015</td>
    </tr>
    <tr>
      <td data-label="SKU">ART1003586</td>
      <td data-label="Name">Serverschrank Medium</td>
      <td data-label="Preis">159,99 €</td>
      <td data-label="Aktionszeitraum">01.02.2015 - 15.02.2015</td>
    </tr>
  </tbody>
</table>

Die Lösung für mobile Tabellen

Ein sehr einfacher Ansatz den viele Webseiten gehen sind media Queries und unterschiedliche Tabellen für große Fensterbreiten und schmale Fenster. Auch ich habe bis jetzt immer die normalen HTML Tabellen mit einem optionalen geblocktem Inhalt ausgetauscht, wenn die Fensterbreite eine bestimmte Breite unterschreitet. Dafür kann man Javascript verwenden oder clever geschriebenen CSS Code.

Optimale Lösung

Eine meiner Meinung nach optimale Lösung findet man auf Codepen. Durch folgendes CSS media Query passt sich die Tabelle ab einer Fensterbreite von 600px an das Design an und wird als responsive Tabelle dargestellt. Alle modernen Browser können diese Darstellung ausgeben. Das media Query sieht wie folgt aus:

@media screen and (max-width: 600px) {

table {
border: 0;
}

table thead {
display: none;
}

table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}

table td:last-child {
border-bottom: 0;
}

table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

Man beachte besonders die Unterscheidung der td Tags nach :last-child, :before und dem Inhalt der Spalte mit td. Die data-label Attribute bilden bei der responsive Tabelle die neuen Bezeichnungen der Werte.

Fazit

Früher waren Tabellen noch ein großes Problem für Webdesigner die mobile Webseiten darstellen mussten. Responsive Tabellen die sich nur über CSS automatisch an die Bildschirmbreite anpassen sind optimal für die unterschiedlichsten Geräte und von der Struktur her wiederverwendbar für weitere Seiten.

Habt ihr andere Beispiele für gute responsive Tabellen? Wie kann man die media Query für Smartphone und Tablet optimal einstellen?