Beispiel:Responsive Tabelle 2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Responsive Tabelle 2</title>
<style>
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
border-collapse: collapse;
line-height: 1;
}
th, td {
vertical-align: top;
text-align: start;
padding: .3em;
border: thin solid lightblue;
}
thead th {
vertical-align: bottom;
padding-bottom: 0;
}
td img {
padding-right: .3em;
padding-bottom: .2em;
vertical-align: top;
}
@media (width < 42em) {
body {
background: lightblue;
}
table, thead, tbody, th, td, tr {
display: block;
}
tr {
border-top: 1px solid grey;
}
thead {
display: none;
}
td {
display: flex;
justify-content: start;
padding-left: 50%;
position: relative;
}
td::before {
content: attr(data-label);
font-weight: bold;
position: absolute;
left: 1rem;
}
}
</style>
</head>
<body>
<h1>Große Tabelle<br>Zellen mit <code>data-header</code></h1>
<p id="hinweis">Auf schmalen Viewports (< 42em) sollen die Tabellenzeilen ohne horizontales Scrollen dargestellt werden. Dabei wird der nicht sichtbare Tabellenkopf durch Pseudoelemente ersetzt.</p>
<table class="wikitable">
<caption style="white-space: nowrap">Liste der Schweizer Kantone</caption>
<thead>
<tr>
<th>Abk.</th>
<th>Kanton</th>
<th>Kantons­nummer</th>
<th data-sort-type="text">Bei­tritt</th>
<th>Hauptort</th>
<th>Ein­wohner <br><small>31. Dezember 2023</small></th>
<th>Fläche <br>(km²)</th>
<th>Mitglieder Ständerat</th>
<th>Ein­wohner­dichte</th>
<th>Amtssprache</th>
</tr>
</thead>
<tbody>
<tr>
<td>ZH</td>
<td><img alt="Wappen Kanton Zürich" src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Wappen_Z%C3%BCrich_matt.svg" width="20" height="24">Zürich</td>
<td>01</td>
<td>1351</td>
<td>Zürich</td>
<td>1'605'508</td>
<td>1'728.94</td>
<td>2</td>
<td>929</td>
<td>Deutsch</td>
</tr>
<tr>
<td>BE</td>
<td><img alt="Wappen Kanton Bern" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/CHE_Bern_COA.svg" width="20" height="24">Bern</td>
<td>02</td>
<td>1353</td>
<td>Bern</td>
<td>1'063'533</td>
<td>5'958.50</td>
<td>2</td>
<td>178</td>
<td>Deutsch, Französisch</td>
</tr>
<tr>
<td>LU</td>
<td><img alt="Wappen Kanton Luzern" src="https://upload.wikimedia.org/wikipedia/commons/6/66/Wappen_Luzern_matt.svg" width="20" height="24">Luzern</td>
<td>03</td>
<td>1332</td>
<td>Luzern</td>
<td>432'744</td>
<td>1'493.52</td>
<td>2</td>
<td>290</td>
<td>Deutsch</td>
</tr>
<tr>
<td>UR</td>
<td><img alt="Wappen Kanton Uri" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Wappen_Uri_matt.svg" width="20" height="24"> Uri</td>
<td>04</td>
<td>1291</td>
<td>Altdorf</td>
<td>37'931</td>
<td>1'076.53</td>
<td>2</td>
<td>35</td>
<td>Deutsch</td>
</tr>
<tr>
<td>SZ</td>
<td><img alt="Wappen Kanton Schwyz" src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Wappen_Schwyz_matt.svg" width="20" height="24">Schwyz</td>
<td>05</td>
<td>1291</td>
<td>Schwyz</td>
<td>167'403</td>
<td>907.88</td>
<td>2</td>
<td>184</td>
<td>Deutsch</td>
</tr>
<tr>
<td>OW</td>
<td><img alt="Wappen Kanton Obwalden" src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Wappen_Obwalden_matt.svg" width="20" height="24"> Obwalden</td>
<td>06</td>
<td>1291</td>
<td>Sarnen</td>
<td>39'272</td>
<td>490.58</td>
<td>1</td>
<td>80</td>
<td>Deutsch</td>
</tr>
<tr>
<td>NW</td>
<td><img alt="Wappen Kanton Nidwalden" src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Wappen_Nidwalden_matt.svg" width="20" height="24">Nidwalden</td>
<td>07</td>
<td>1291</td>
<td>Stans</td>
<td>45'016</td>
<td>275.84</td>
<td>1</td>
<td>163</td>
<td>Deutsch</td>
</tr>
<tr>
<td>GL</td>
<td><img alt="Wappen Kanton Glarus" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Wappen_Glarus_matt.svg" width="20" height="24">Glarus</td>
<td>08</td>
<td>1352</td>
<td>Glarus</td>
<td>42'056</td>
<td>685.31</td>
<td>2</td>
<td>61</td>
<td>Deutsch</td>
</tr>
<tr>
<td>ZG</td>
<td><img alt="Wappen Kanton Zürich" src="https://upload.wikimedia.org/wikipedia/commons/3/31/Wappen_Zug_matt.svg" width="20" height="24">Zug</td>
<td>09</td>
<td>1352</td>
<td>Zug</td>
<td>132'556</td>
<td>238.73</td>
<td>2</td>
<td>555</td>
<td>Deutsch</td>
</tr>
<tr>
<td>FR</td>
<td><img alt="Wappen Kanton Freiburg" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Wappen_Freiburg_matt.svg" width="20" height="25" >Freiburg</td>
<td>10</td>
<td>1481</td>
<td>Freiburg</td>
<td>341'537</td>
<td>1'672.43</td>
<td>2</td>
<td>204</td>
<td>Französisch, Deutsch</td>
</tr>
<tr>
<td>SO</td>
<td><img alt="Wappen Kanton Solothurn" src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Wappen_Solothurn_matt.svg" width="20" height="24">Solothurn</td>
<td>11</td>
<td>1481</td>
<td>Solothurn</td>
<td>286'844</td>
<td>790.46</td>
<td>2</td>
<td>363</td>
<td>Deutsch</td>
</tr>
<tr>
<td>BS</td>
<td><img alt="Wappen Kanton Basel-Stadt" src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wappen_Basel-Stadt_matt.svg" width="20" height="24">Basel-Stadt</td>
<td>12</td>
<td>1501</td>
<td>Basel</td>
<td>200'031</td>
<td>36.95</td>
<td>1</td>
<td>5'414</td>
<td>Deutsch</td>
</tr>
<tr>
<td>BL</td>
<td><img alt="Wappen Kanton Basel-Landschaft" src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Coat_of_arms_of_Kanton_Basel-Landschaft.svg" width="20" height="24">Basel-Landschaft</td>
<td>13</td>
<td>1501</td>
<td>Liestal</td>
<td>298'837</td>
<td>517.67</td>
<td>1</td>
<td>577</td>
<td>Deutsch</td>
</tr>
<tr>
<td>SH</td>
<td><img alt="Wappen Kanton Schaffhausen" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Wappen_Schaffhausen_matt.svg" width="20" height="24">Schaffhausen</td>
<td>14</td>
<td>1501</td>
<td>Schaffhausen</td>
<td>87'111</td>
<td>298.42</td>
<td>2</td>
<td>292</td>
<td>Deutsch</td>
</tr>
<tr>
<td>AR</td>
<td><img alt="Wappen Kanton Appenzell Ausserrhoden" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Wappen_Appenzell_Ausserrhoden_matt.svg" width="20" height="24">Appenzell Ausserrhoden</td>
<td>15</td>
<td>1513</td>
<td>Herisau</td>
<td>56'495</td>
<td>242.84</td>
<td>1</td>
<td>233</td>
<td>Deutsch</td>
</tr>
<tr>
<td>AI</td>
<td><img alt="Wappen Kanton Appenzell Innerrhoden" src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Wappen_Appenzell_Innerrhoden_matt.svg" width="20" height="24">Appenzell Innerrhoden</td>
<td>16</td>
<td>1513</td>
<td>Appenzell</td>
<td>16'585</td>
<td>172.48</td>
<td>1</td>
<td>96</td>
<td>Deutsch</td>
</tr>
<tr>
<td>SG</td>
<td><img alt="Wappen Kanton St. Gallen" src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Coat_of_arms_of_canton_of_St._Gallen.svg" width="20" height="25" >St. Gallen</td>
<td>17</td>
<td>1803</td>
<td>St. Gallen</td>
<td>535'114</td>
<td>2'028.20</td>
<td>2</td>
<td>264</td>
<td>Deutsch</td>
</tr>
<tr>
<td>GR</td>
<td><img alt="Wappen Kanton Graubünden" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/CHE_Graub%C3%BCnden_COA.svg" width="20" height="23" >Graubünden</td>
<td>18</td>
<td>1803</td>
<td>Chur</td>
<td>204'888</td>
<td>7'105.30</td>
<td>2</td>
<td>29</td>
<td>Deutsch, Rätoromanisch, Italienisch</td>
</tr>
<tr>
<td>AG</td>
<td><img alt="Wappen Kanton Aargau" src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Wappen_Aargau_matt.svg" width="20" height="24">Aargau</td>
<td>19</td>
<td>1803</td>
<td>Aarau</td>
<td>726'894</td>
<td>1'403.80</td>
<td>2</td>
<td>518</td>
<td>Deutsch</td>
</tr>
<tr>
<td>TG</td>
<td><img alt="Wappen Kanton Thurgau" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Wappen_Thurgau_matt.svg" width="20" height="24">Thurgau</td>
<td>20</td>
<td>1803</td>
<td>Frauenfeld</td>
<td>295'220</td>
<td>994.33</td>
<td>2</td>
<td>297</td>
<td>Deutsch</td>
</tr>
<tr>
<td>TI</td>
<td><img alt="Wappen Kanton Tessin" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Wappen_Tessin_matt.svg" width="20" height="24">Tessin</td>
<td>21</td>
<td>1803</td>
<td>Bellinzona</td>
<td>357'720</td>
<td>2'812.16</td>
<td>2</td>
<td>127</td>
<td>Italienisch</td>
</tr>
<tr>
<td>VD</td>
<td><img alt="Wappen Kanton Waadt" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Wappen_Waadt_matt.svg" width="20" height="24">Waadt</td>
<td>22</td>
<td>1803</td>
<td>Lausanne</td>
<td>845'870</td>
<td>3'212.02</td>
<td>2</td>
<td>263</td>
<td>Französisch</td>
</tr>
<tr>
<td>VS</td>
<td><img alt="Wappen Kanton Wallis" src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wappen_Wallis_matt.svg" width="20" height="24">Wallis</td>
<td>23</td>
<td>1815</td>
<td>Sitten</td>
<td>365'844</td>
<td>5'224.64</td>
<td>2</td>
<td>70</td>
<td>Französisch, Deutsch</td>
</tr>
<tr>
<td>NE</td>
<td><img alt="Wappen Kanton Neuenburg" src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Wappen_Neuenburg_matt.svg" width="20" height="24">Neuenburg</td>
<td>24</td>
<td>1815</td>
<td>Neuenburg</td>
<td>178'291</td>
<td>802.16</td>
<td>2</td>
<td>222</td>
<td>Französisch</td>
</tr>
<tr>
<td>GE</td>
<td><img alt="Wappen Kanton Genf" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Wappen_Genf_matt.svg" width="20" height="24">Genf</td>
<td>25</td>
<td>1815</td>
<td>Genf</td>
<td>524'410</td>
<td>282.49</td>
<td>2</td>
<td>1'856</td>
<td>Französisch</td>
</tr>
<tr>
<td>JU</td>
<td><img alt="Wappen Kanton Jura" src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Wappen_Jura_matt.svg" width="20" height="24">Jura</td>
<td>26</td>
<td>1979</td>
<td>Delsberg</td>
<td>74'548</td>
<td>838.51</td>
<td>2</td>
<td>89</td>
<td>Französisch</td>
</tr>
<tr class="hintergrundfarbe5 sortbottom">
<td>CH</td>
<td><img alt="Eidgenössisches Wappen" src="https://upload.wikimedia.org/wikipedia/commons/9/95/Coat_of_arms_of_Switzerland.svg" width="20" height="24">Schweizerische Eidgenossenschaft</td>
<td>-</td>
<td>1848</td>
<td>Bern (Bundesstadt)</td>
<td>8'962'258</td>
<td>41'290.69</td>
<td>46</td>
<td>208</td>
<td>Deutsch (62 %),<br>Französisch (23 %),<br>Italienisch (8 %),<br>Rätoromanisch (0.5 %)</td>
</tr>
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('table').forEach(table => {
const headers = Array.from(
table.querySelectorAll('thead th')
).map(th => th.textContent.trim());
table.querySelectorAll('tbody tr').forEach(row => {
row.querySelectorAll('td').forEach((td, index) => {
if (headers[index]) {
td.setAttribute('data-label', headers[index]);
}
});
});
});
});
</script>
</body>
</html>
