smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Responsive Webdesign: Responsive HTML-Tabellen erstellen

14. Mai 2012
Stephan
Responsive Webdesign

Bei der Erstellung meines Blog-Statistik-Artikels ist mir aufgefallen, dass die erstellten Statistik-Tabellen bei kleinen Bildschirmauflösungen sich nur bis zu einem gewissen Grad skalieren lassen.

Das liegt daran, dass Tabellen, gegeben durch den jeweiligen Inhalt, eine bestimmte minimale Breite (width) haben und diese minimale Breite größer sein kann, als die verwendete Bildschirmauflösung. Das ist generell ein Problem beim Einsatz von Daten-Tabellen innerhalb eines Responsive-(Web-)Designs, weshalb ich euch in diesem Artikel eine Technik zum Erstellen von Responsive-Tables, also Tabellen die sich auch an kleine Bildschirmauflösungen anpassen, vorstellen möchte.

Problem minimale Tabellen-Breite

Als ich meinen Blog-Statistik-Artikel erstellt habe und mir mittels dem IPhone4Simulator den Artikel angeschaut habe, stellte ich folgendes Design-Problem fest:

Responsive-Table - Design-Problem

Wie ihr auf dem Bild erkennen könnt, passt die Tabelle von der Größe her einfach nicht mehr auf den Bildschirm und ragt über den Rand des Layouts hinaus.

Im Folgenden einmal der Aufbau der Tabelle:

<table class="postTable">
    <thead>
    <tr>
        <th>Kategorie</th>
        <th>Aktueller Monat</th>
        <th>Vormonat</th>
        <th>Vergleich Vormonat</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Artikel</td>
        <td class="textRight">10</td>
        <td class="textRight">1</td>
        <td class="textRight">-</td>
    </tr>
    <tr class="oddRow">
        <td>Kommentare</td>
        <td class="textRight">0</td>
        <td class="textRight">0</td>
        <td class="textRight">-</td>
    </tr>
    <tr>
        <td>Spam-Kommentare</td>
        <td class="textRight">7</td>
        <td class="textRight">0</td>
        <td class="textRight">-</td>
    </tr>
    <tr class="oddRow">
        <td>Track-/Pingsbacks</td>
        <td class="textRight">1</td>
        <td class="textRight">0</td>
        <td class="textRight">-</td>
    </tr>
    <tr>
        <td>RSS-Feed-Leser</td>
        <td class="textRight">1</td>
        <td class="textRight">0</td>
        <td class="textRight">-</td>
    </tr>
    </tbody>
</table>

Die dazugehörigen CSS-Angaben:

.postTable {
    margin: 10px 0 0 0;
    width: 100%;
    border-top: 1px solid #d4e7ee;
    border-right: 1px #d4e7ee solid;
    border-collapse: collapse;
}

.postTable thead, .oddRow {
    background: #f5f8fd;
}

.postTable th, .postTable td {
    padding: 3px 5px;
    color: #000;
    border-bottom: 1px #d4e7ee solid;
    border-left: 1px #d4e7ee solid;
}

.textRight {
    text-align: right;
}

Lösung: data-Attribute & CSS3 Media-Queries

Beim Recherchieren nach einem Lösungsansatz bin ich bei MobilFreaks.com fündig geworden.

Die Grundidee ist, dass mittels CSS3 Media-Queries ab einer gewissen Bildschirmauflösung die Tabelle und deren Elemente als Block-Elemente behandelt werden und die Tabelle sich anschließend nicht mehr wie eine richtige Tabelle „verhält“.

Eine Tabellen-Spalte sieht bzw. „verhält“ sich dann z.B. so wie eine Tabellen-Zeile. Aus diesem Grund wird der komplette Head-Bereich der Tabelle (<thead>) mittels CSS ausgeblendet.

Weiterhin wird mittels CSS jeder Tabellen-Spalte der jeweilige Spalten-Titel hinzugefügt. Hierfür benötigen wir nun das data-Attribut, was wir im Code für die Tabelle jeder Spalte hinzufügen:

<table class="postTable">
    <thead>
    <tr>
        <th>Kategorie</th>
        <th>Aktueller Monat</th>
        <th>Vormonat</th>
        <th>Vergleich Vormonat</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="oddCol" data-label="Kategorie">Artikel</td>
        <td class="textRight" data-label="April 2012">10</td>
        <td class="textRight oddCol" data-label="Vormonat">1</td>
        <td class="textRight" data-label="Vergleich Vormonat">-</td>
    </tr>
    <tr class="oddRow">
        <td class="oddCol" data-label="Kategorie">Kommentare</td>
        <td class="textRight" data-label="April 2012">0</td>
        <td class="textRight oddCol" data-label="Vormonat">0</td>
        <td class="textRight" data-label="Vergleich Vormonat">-</td>
    </tr>
    <tr>
        <td class="oddCol" data-label="Kategorie">Spam-Kommentare</td>
        <td class="textRight" data-label="April 2012">7</td>
        <td class="textRight oddCol" data-label="Vormonat">0</td>
        <td class="textRight" data-label="Vergleich Vormonat">-</td>
    </tr>
    <tr class="oddRow">
        <td class="oddCol" data-label="Kategorie">Track-/Pingsbacks</td>
        <td class="textRight" data-label="April 2012">1</td>
        <td class="textRight oddCol" data-label="Vormonat">0</td>
        <td class="textRight" data-label="Vergleich Vormonat">-</td>
    </tr>
    <tr>
        <td class="oddCol" data-label="Kategorie">RSS-Feed-Leser</td>
        <td class="textRight" data-label="April 2012">1</td>
        <td class="textRight oddCol" data-label="Vormonat">0</td>
        <td class="textRight" data-label="Vergleich Vormonat">-</td>
    </tr>
    </tbody>
</table>

Die jeweiligen Spalten erhalten also ein „data-label“-Attribut mit dem jeweiligen Spalten-Titel – analog zum Tabellen-Kopf.

Als nächstes erweitern wir unsere CSS-Angaben:

@media all and (max-width:640px) {
    .postTable, .postTable thead, .postTable tbody, .postTable tr, .postTable th, .postTable td {
        display: block;
    }

    .postTable {
        text-align: right;
    }

    .postTable thead {
        position: absolute;
        top: -1111px;
        left: -1111px;
    }

    .postTable td:before {
        float: left;
        padding: 0 10px 0 0;
        content: attr(data-label) ":";
    }

    .postTable td:nth-child(1) {
        font-weight: bold;
    }

    .postTable td:nth-child(1) {
        font-weight: bold;
    }

    .postTable td:last-child {
        border-bottom: 5px #d4e7ee solid;
    }

    .oddRow {
        background: #fff;
    }

    .oddCol {
        background: #f5f8fd;
    }
}

Das Endresultat lässt sich nun durchaus sehen, denn die Tabelle sieht nun auch auf Geräten mit kleinen Bildschirmaulösungen ordentlich aus:

Responsive-Table mit data-Attribut & CSS3 Media-Query

Fazit

Die vorgestellte Lösung ist ein guter Ansatz, damit sich auch Tabellen innerhalb eines Responsive (Web-)Designs vollständig an die jeweilige Bildschirmauflösung anpassen.

Neben der vorgestellten Variante gibt es noch weitere Möglichkeiten – eine Auflistung diverser Techniken für die Erstellung von Responsive-Tables findet ihr auf CSS-Tricks.com.

Was haltet ihr von dieser Technik? Hattet ihr auch schon Probleme mit Tabellen, die euer Responsive-Design beeinträchtigt haben?

Hat dir der Artikel gefallen? Dann interessiert dich vielleicht auch:
Kategorien: Responsive Design
Tags: Responsive Webdesign
Kommentare  
9 Kommentare vorhanden
1 Core Design Studio schrieb am 8. Januar 2013 um 14:39 Uhr

Eigentlich bin ich ja kein Freund von Tabellen, aber wenn es doch sein muss, ist das schon eine sehr gute Lösung. Aber trotzdem sollte man versuchen stets auf Tabellen zu verzichten. Anhand von dem code für HTML und CSS sieht man schon, dass das doch recht viel Aufwand bedeutet. VG, Mario

2 win-tools schrieb am 15. Januar 2013 um 15:57 Uhr

Sehr gute Idee, danke für die Anregung!

An Core Design Studio:

Man solle KEINESFALLS auf Tabellen verzichten, sondern sie dazu nutzen wofür sie bestimmt sind (Stichwort Semantik).
Und genau für das obige Beispiel sind sie gedacht…

Wenn man sich mit HTML beschäftigt, sollte man auch wissen, wie man HTML einsetzt.

Wie krank ist das denn, wenn man kein Freund von Tabellen ist und sie deshalb mit divs nach bastellt?

3 column schrieb am 21. Januar 2013 um 13:51 Uhr

Vielen Dank!

Super Idee, manchmal kommt man eben um Tabellen nicht herum.

Vielen Dank

4 epunk schrieb am 7. Februar 2013 um 10:36 Uhr

Danke, ein übersichtliches Beispiel, mit dessen Hilfe ich nun mal versuche das Twitter Bootstrap CSS und die Tabellen zu ergänzen. Das responsive Verhalten der TwB-Tabellen wurde nicht so konsequent umgesetzt.

5 Robert schrieb am 14. August 2013 um 13:02 Uhr

Das ist wirklich gut gelöst. Ich verwende Tabellen wo es nur geht, aber hab es nie wirklich gut hin bekommen. Vielen Dank für den tollen Tipp und die Beispiele. Ich hoffe, ich bekomme es dieses Mal hin.

Grüße!

6 Alex schrieb am 28. August 2014 um 09:00 Uhr

Hey Stephan,

jap, ich habe das Problem, dass meine Tabellen nicht responsive sind und ich befürchte alles umbauen zu müssen, da ich sehr viele unterschiedliche Tabellenformate habe. Dein Ansatz das ganze mit display umzustylen klingt sehr logisch – ich werde das mal ausprobieren.

Greez

7 Michael Finger schrieb am 30. September 2014 um 12:29 Uhr

Hallo Stephan,
entlich habe ich einen möglichen Ansatz gefunden um das Problem mit meinen doch sehr großen Tabellen zu lösen. Ich hatte schon die Befürchtung, das es da nicht wirklich eine gute Lösung für gibt, von daher sehr Herzlichen Danke für deine Mühe und Arbeit die du dir gemacht hast, das hat mir sehr weiter geholfen.

Gruß

Michael

8 Kocheh schrieb am 30. Oktober 2015 um 16:54 Uhr

Hallo,
vielen Dank für Ihre Website. Ich habe gerade ein Praktikum gemacht. Ich habe Problem mit responsive Tabelle.
Ich brauch eine andere Form, dass ich in Internet nicht gefunden habe.
Ich zeige Ihnen an:
Bei Desktop Variante, muss die Tabelle ganz normal mit 5 Spalten sein.
Aber bei Smartphone Variante, muss ich 2 Spalten haben. da die 3, 4 und 5 Spalten gehen in zweite Spalte. z.B.

stellen Nr. / Bezeichnung / AZ / Beginn / Arbeitsort

dann kommt bei Smartphone Variante:

Stellen Nr. / Bezeichnung
AZ / Beginn / Arbeitsort

aber ohne titel.

Ich hoffe Sie können mir helfen.

Ich warte auf Ihr E-Mail.

Danke

9 Matthias schrieb am 26. Januar 2016 um 12:53 Uhr

Hi,

danke für die Ausführungen. Im Firefox funktioniert es tadellos. Im Google Chrome klappte es bei mir aber nicht. Kannst Du das auch beobachten?

Viele Grüße

Matthias

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!