Beispiel:Responsive Tabelle 1.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 1</title>	
 <style>

div.tablecontainer { 

 max-height: 60vh;
 overflow: auto;

}

table { 

 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 max-width: 100%;

border-collapse: collapse; line-height: 1; }

table caption { 

 position: sticky;
 left: 0;
 max-width: 100vw;

}

/* 1. Zeile sticky */ thead { position: sticky; top: 0; color: black; background: #E5EDF8; 

 z-index: 3;

}

/* 1. Spalte sticky */ td:first-child, th:first-child { 

 font-weight: bold;
 position: sticky;
 left: 0;
 z-index: 2;
 background: #E5EDF8;

}

th, td { vertical-align: top; text-align: start; padding: .3em; 

 border: thin solid #ddd;

}

thead th { vertical-align: bottom; padding-bottom: .3em; }

th:last-child, td:last-child { text-align: end; }

td img { 

 padding-right: .3em;
 padding-bottom: .2em;
 vertical-align: top;

} </style>

</head>

<body>

Große Tabelle mit sticky Header und 1. Spalte

In längeren und breiteren Tabellen sollen der Tabellenkopf und die 1. Spalte beim Scrollen stets sichtbar bleiben. Dies kann man einfach und ohne JavaScript mit <a href="https://wiki.selfhtml.org/wiki/sticky">position: sticky</a> erreichen.

<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="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 01 1351 Zürich 1'605'508 1'728.94 2 929 Deutsch
BE <img alt="Wappen Kanton Bern" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/CHE_Bern_COA.svg" width="20" height="24">Bern 02 1353 Bern 1'063'533 5'958.50 2 178 Deutsch, Französisch
LU <img alt="Wappen Kanton Luzern" src="https://upload.wikimedia.org/wikipedia/commons/6/66/Wappen_Luzern_matt.svg" width="20" height="24">Luzern 03 1332 Luzern 432'744 1'493.52 2 290 Deutsch
UR <img alt="Wappen Kanton Uri" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Wappen_Uri_matt.svg" width="20" height="24"> Uri 04 1291 Altdorf 37'931 1'076.53 2 35 Deutsch
SZ <img alt="Wappen Kanton Schwyz" 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="Wappen Kanton Obwalden" 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="Wappen Kanton Nidwalden" 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="Wappen Kanton Glarus" 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="Wappen Kanton Zürich" 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="Wappen Kanton Freiburg" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Wappen_Freiburg_matt.svg" width="20" height="25" >Freiburg 10 1481 Freiburg 341'537 1'672.43 2 204 Französisch, Deutsch
SO <img alt="Wappen Kanton Solothurn" 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="Wappen Kanton Basel-Stadt" 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 5'414 Deutsch
BL <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 13 1501 Liestal 298'837 517.67 1 577 Deutsch
SH <img alt="Wappen Kanton Schaffhausen" 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="Wappen Kanton Appenzell Ausserrhoden" 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="Wappen Kanton Appenzell Innerrhoden" 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="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 17 1803 St. Gallen 535'114 2'028.20 2 264 Deutsch
GR <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 18 1803 Chur 204'888 7'105.30 2 29 Deutsch, Rätoromanisch, Italienisch
AG <img alt="Wappen Kanton Aargau" src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Wappen_Aargau_matt.svg" width="20" height="24">Aargau 19 1803 Aarau 726'894 1'403.80 2 518 Deutsch
TG <img alt="Wappen Kanton Thurgau" 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="Wappen Kanton Tessin" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Wappen_Tessin_matt.svg" width="20" height="24">Tessin 21 1803 Bellinzona 357'720 2'812.16 2 127 Italienisch
VD <img alt="Wappen Kanton Waadt" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Wappen_Waadt_matt.svg" width="20" height="24">Waadt 22 1803 Lausanne 845'870 3'212.02 2 263 Französisch
VS <img alt="Wappen Kanton Wallis" src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wappen_Wallis_matt.svg" width="20" height="24">Wallis 23 1815 Sitten 365'844 5'224.64 2 70 Französisch, Deutsch
NE <img alt="Wappen Kanton Neuenburg" 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="Wappen Kanton Genf" 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 1'856 Französisch
JU <img alt="Wappen Kanton Jura" 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="24">Schweizerische Eidgenossenschaft - 1848 Bern (Bundesstadt) 8'962'258 41'290.69 46 208 Deutsch (62 %),
Französisch (23 %),
Italienisch (8 %),
Rätoromanisch (0.5 %)

Der Tabellen-Container ist auf eine Höhe von 60vh beschränkt, damit z.B. auf Smartphones der weitere Seiteninhalt unter der Tabelle angezeigt wird. Man muss so nicht unbedingt die gesamte Tabelle bis zuunterst durchscrollen, sondern kann mit dem Finger hier unten swipen und den Seiteninhalt unter der Tabelle weiter lesen.

</body> </html>

Abgerufen am 7.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Responsive_Tabelle_1.html"