Responsive Tabellen mit CSS
Der dritte Versuch, mit <ul>
Allerdings gefällt mir der Code noch nicht so richtig, vor lauter <div> kann man die Struktur der Tabelle gar nicht mehr erkennen. Also nochmal nachfeilen, und zwar mit verschachtelten Liste. Eine Liste für die Zeilen, und darin verschachtelt jeweils eine Liste für die Zellen einer Zeile:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p { clear: both; }
.Klima { display:block;list-style:none outside;padding:0; }
.Klima ul { padding:0; }
.Gruppe li {
background-color: #e0e0e0; text-align: center;
display: inline-block; width: 5.5%;
margin: 2px 0; padding: 0;
}
.Monat li { background-color:#c0c0c0; }
li.Beschr { font-style:italic; width:25%; }
@media screen and (max-width: 620px) {
.Klima { white-space:nowrap; width: 25em; }
.Gruppe { float:left; }
.Gruppe li { display:block; margin:3px 2px; width:8em; }
}
</style>
</head>
<body>
<h1>Klima in Hamburg</h1>
<ul class="Klima"><li><ul class="Gruppe Monat">
<li class="Beschr">Monat</li>
<li>Jan</li> <li>Feb</li> <li>Mär</li> <li>Apr</li>
<li>Mai</li> <li>Jun</li> <li>Jul</li> <li>Aug</li>
<li>Sep</li> <li>Okt</li> <li>Nov</li> <li>Dez</li>
</ul></li> <li><ul class="Gruppe">
<li class="Beschr">Temperatur (°C)</li>
<li>1,8</li> <li>2,1</li> <li>4,8</li> <li>9,4</li>
<li>12,8</li> <li>15,8</li> <li>18,8</li> <li>17,6</li>
<li>14,5</li> <li>10,6</li> <li>6,3</li> <li>2,8</li>
</ul></li> <li><ul class="Gruppe">
<li class="Beschr">Niederschlag (mm)</li>
<li>67</li> <li>44</li> <li>51</li> <li>32</li>
<li>72</li> <li>70</li> <li>85</li> <li>80</li>
<li>60</li> <li>62</li> <li>61</li> <li>75</li>
</ul></li></ul>
<p><a href="http://www.wetterdienst.de/Deutschlandwetter/Hamburg/Klima/">Quelle</a></p>
</html>
</body>
Da sieht auch gleich der Quellcode viel besser aus, und die Darstellung im Browser ist genau so wie bei dem <div>-Code.
Fazit: Schicke Tabellen, schicker Code, Mission erfüllt. Wer mag, kann statt Listen auch Definitionen mit <dl>, <dt> und <dd> benutzen.
- Der erste Versuch, mit <table>
- Der zweite Versuch, mit <div>
- Der dritte Versuch, mit <ul>
- Erste Alternative: die Tabelle um 90° drehen
- Weitere Alternativen