Responsive Tabellen mit CSS
Erste Alternative: die Tabelle um 90° drehen
So eine Tabelle kann man auch einfach drehen, wir leben schließlich im Zeitalter von CSS3 und seinen Transformationen:
Der Code dafür, wie im ersten Beispiel wieder mit <table>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
table { width:100%; }
th { background-color:#c0c0c0; }
td { background-color:#e0e0e0; text-align:center;}
@media screen and (max-width:620px) {
.Drehen {display:flex;justify-content:center;align-items:center;height:600px; padding:auto;}
table {
width:600px;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
</style>
</head>
<body>
<h1>Klima in Hamburg</h1>
<div class="Drehen">
<table><tr>
<th>Monat</th>
<th>Jan</th><th>Feb</th><th>Mär</th><th>Apr</th>
<th>Mai</th><th>Jun</th><th>Jul</th><th>Aug</th>
<th>Sep</th><th>Okt</th><th>Nov</th><th>Dez</th>
</tr><tr>
<td><i>Temperatur (°C)</i></td>
<td>1,8</td><td>2,1</td><td>4,8</td><td>9,4</td>
<td>12,8</td><td>15,8</td><td>18,8</td><td>17,6</td>
<td>14,5</td><td>10,6</td><td>6,3</td><td>2,8</td>
</tr><tr>
<td><i>Niederschlag (mm)</i></td>
<td>67</td><td>44</td><td>51</td><td>32</td>
<td>72</td><td>70</td><td>85</td><td>80</td>
<td>60</td><td>62</td><td>61</td><td>75</td>
</tr></table></div>
<p><a href="http://www.wetterdienst.de/Deutschlandwetter/Hamburg/Klima/">Quelle</a></p>
</html>
</body>
Geht auch, oder? Schließlich hat man die kleinen Bildschirme ja in der Hand und kann sie einfach drehen. Aber was ist, wenn das Gerät die Drehung erkennt und die ganze Seite auf die neue Orientierung anpaßt? Dann liegt die Tabelle schon wieder auf der Seite!
Fazit: Schnapsidee, ganz schnell wieder vergessen. Auch deshalb, weil die Positionierung der gedrehten Elemente nicht auf jedem Browser (bspw. Safari) wirklich wie gewünscht hinhaut.
- Der erste Versuch, mit <table>
- Der zweite Versuch, mit <div>
- Der dritte Versuch, mit <ul>
- Erste Alternative: die Tabelle um 90° drehen
- Weitere Alternativen