Beispiel:Responsive Tabelle 3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<<!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 3</title>	  
 <style>

th, td { 

 vertical-align: top;
 text-align: start;
 padding: 0.3em 0;

}

thead th { 

 vertical-align: bottom;
 padding-bottom: 0;

}

.table-container { 

 container: card / inline-size;

width: 30em; /* Nur zum Testen: Verringern Sie den Wert auf 40em! */ } @container card (inline-size < 35em) { 

 table {
   background: lightyellow;
   overflow-x: auto;
   display: block;
   width: 100%;
 }

tr, th, td { display: block; }

tr { padding: 1em; border-top: 0 none; }

th { padding: 0; }

td { padding: 1em 0 0; } } 


 </style>

</head>

<body>

Responsive Tabellen mit Container Queries

<thead> </thead> <tbody> </tbody>
Liste der Schweizer Kantone
Abk. Kanton Kantons-
nummer 		Bei­tritt Hauptort Ein­wohner
31. Dezember 2023 		Fläche
(km²) 		Mitglieder
Ständerat 		Ein­wohner-
dichte 		Amtssprache
ZH <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Wappen_Z%C3%BCrich_matt.svg" width="20" height="24" >Zürich 01 1351 Zürich 1'605'508 1728.94 2 929 Deutsch
BE <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/CHE_Bern_COA.svg" width="20" height="24" >Bern 02 1353 Bern 1'063'533 5958.50 2 178 Deutsch, Französisch
LU <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/6/66/Wappen_Luzern_matt.svg" width="20" height="24" >Luzern 03 1332 Luzern 432'744 1493.52 2 290 Deutsch
UR <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Wappen_Uri_matt.svg" width="20" height="24" > Uri 04 1291 Altdorf 37'931 1076.53 2 35 Deutsch
SZ <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Wappen_Schwyz_matt.svg" width="20" height="24" >Schwyz 05 1291 Schwyz 167'403 907.88 2 184 Deutsch
OW <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Wappen_Obwalden_matt.svg" width="20" height="24" > Obwalden 06 1291 Sarnen 39'272 490.58 1 80 Deutsch
NW <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Wappen_Nidwalden_matt.svg" width="20" height="24" >Nidwalden 07 1291 Stans 45'016 275.84 1 163 Deutsch
GL <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Wappen_Glarus_matt.svg" width="20" height="24" >Glarus 08 1352 Glarus 42'056 685.31 2 61 Deutsch
ZG <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/3/31/Wappen_Zug_matt.svg" width="20" height="24"> Zug 09 1352 Zug 132'556 238.73 2 555 Deutsch
FR <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Wappen_Freiburg_matt.svg" width="20" height="25" > Freiburg 10 1481 Freiburg 341'537 1672.43 2 204 Französisch, Deutsch
SO <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Wappen_Solothurn_matt.svg" width="20" height="24">Solothurn 11 1481 Solothurn 286'844 790.46 2 363 Deutsch
BS <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wappen_Basel-Stadt_matt.svg" width="20" height="24">Basel-Stadt 12 1501 Basel 200'031 36.95 1 5414 Deutsch
BL <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Coat_of_arms_of_Kanton_Basel-Landschaft.svg" width="20" height="24" >Basel-Landschaft 13 1501 Liestal 298'837 517.67 1 577 Deutsch
SH <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Wappen_Schaffhausen_matt.svg" width="20" height="24" >Schaffhausen 14 1501 Schaffhausen 87'111 298.42 2 292 Deutsch
AR <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Wappen_Appenzell_Ausserrhoden_matt.svg" width="20" height="24" >Appenzell Ausserrhoden 15 1513 Herisau 56'495 242.84 1 233 Deutsch
AI <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Wappen_Appenzell_Innerrhoden_matt.svg" width="20" height="24" >Appenzell Innerrhoden 16 1513 Appenzell 16'585 172.48 1 96 Deutsch
SG <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Coat_of_arms_of_canton_of_St._Gallen.svg" width="20" height="25" >St. Gallen 17 1803 St. Gallen 535'114 2028.20 2 264 Deutsch
GR <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/CHE_Graub%C3%BCnden_COA.svg" width="20" height="23" >Graubünden 18 1803 Chur 204'888 7105.30 2 29 Deutsch, Rätoromanisch, Italienisch
AG <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Wappen_Aargau_matt.svg" width="20" height="24">Aargau 19 1803 Aarau 726'894 1403.80 2 518 Deutsch
TG <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Wappen_Thurgau_matt.svg" width="20" height="24">Thurgau 20 1803 Frauenfeld 295'220 994.33 2 297 Deutsch
TI <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Wappen_Tessin_matt.svg" width="20" height="24">Tessin 21 1803 Bellinzona 357'720 2812.16 2 127 Italienisch
VD <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Wappen_Waadt_matt.svg" width="20" height="24">Waadt 22 1803 Lausanne 845'870 3212.02 2 263 Französisch
VS <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wappen_Wallis_matt.svg" width="20" height="24" >Wallis 23 1815 Sitten 365'844 5224.64 2 70 Französisch, Deutsch
NE <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Wappen_Neuenburg_matt.svg" width="20" height="24">Neuenburg 24 1815 Neuenburg 178'291 802.16 2 222 Französisch
GE <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Wappen_Genf_matt.svg" width="20" height="24">Genf 25 1815 Genf 524'410 282.49 2 1856 Französisch
JU <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Wappen_Jura_matt.svg" width="20" height="24" >Jura 26 1979 Delsberg 74'548 838.51 2 89 Französisch
CH <img alt="Eidgenössisches Wappen" src="https://upload.wikimedia.org/wikipedia/commons/9/95/Coat_of_arms_of_Switzerland.svg" width="20" height="22" >Schweizerische Eidgenossenschaft 1848 Bern (Bundesstadt) 8'962'258 41'290.69 46 208 Deutsch (62 %),
Französisch (23 %),
Italienisch (8 %),
<a href="/wiki/B%C3%BCndnerromanisch" title="Bündnerromanisch">Rätoromanisch</a> (0,5 %)

</body> </html>

Abgerufen am 2.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Responsive_Tabelle_3.html"