Responsive Webdesign: Responsive Tabellen erstellen
Beim Erstellen eines Blog-Statistik-Beitrags für meinen ehemaligen Blog ist mir aufgefallen, dass die Statistik-Tabellen bei kleinen Bildschirmauflösungen sich nur bis zu einem gewissen Grad skalieren lassen.
Das liegt daran, dass Tabellen durch ihren jeweiligen Inhalt eine bestimmte minimale Breite haben und diese größer sein kann, als die verwendete Bildschirmauflösung. Das ist generell ein Problem beim Einsatz von Datentabellen innerhalb eines Responsive Webdesigns, weshalb ich euch in diesem Beitrag eine Technik zum Erstellen von Responsive Tabellen, also Tabellen die sich auch an kleine Bildschirmauflösungen anpassen, vorstellen möchte.
Problem minimale Tabellen-Breite
Als ich meinen Blog-Statistik-Beitrag erstellt habe und mir in kleinerer Fenstergröße angeschaut habe, stellte ich folgendes Design-Problem fest:
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 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 & CSS Media-Queries
Die Grundidee ist, dass mittels CSS 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 Tabellenspalte sieht bzw. "verhält" sich dann so wie eine Tabellenzeile. Aus diesem Grund wird der komplette Kopfbereich der Tabelle (<thead>) mittels CSS ausgeblendet.
Weiterhin wird mittels CSS jeder Tabellenspalte der jeweilige Spaltentitel 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 Spaltentitel - analog zum Tabellenkopf.
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 ansprechender aus:
Fazit
Die vorgestellte Lösung ist ein guter Ansatz, damit sich auch Tabellen innerhalb eines Responsive Webdesigns vollständig an die jeweilige Bildschirmauflösung anpassen.
Neben der vorgestellten Variante gibt es noch weitere Möglichkeiten zur Erstellung von Responsive Tabellen. Eine Auflistung diverser Techniken findet ihr auf css-tricks.com.
- 14. Mai 2012
ursprüngliche Veröffentlichung in meinem ehemaligen Blog "Smart-Webentwicklung"