CSS - Position Sticky in einer HTML Tabelle

Horizontal

Foo	Bar	Baz	Foo	Bar	Baz	Foo	Bar	Baz	Foo	Bar	Baz	Foo	Bar	Baz	Foo	Bar	Baz
Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.	Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.	Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.	Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.	Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.	Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.	Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.	Donut sweet roll jelly beans chocolate cake. Tootsie roll.


<style>

div.table-wrapper {

 overflow-x: Auto;

}



th {

 position: Sticky;

 top: 0;

}

</style>



<div class="table-wrapper">



<table>

<tr>

 <th>Foo</th>

 <th>Bar</th>

 <th>Baz</th>

</tr>

<tr>

 <td>-Inhalt-</td>

 <td>-Inhalt-</td>

 <td>-Inhalt-</td>

</tr>

 </table>



</div>

Die "Zebrastreifen" sind unter: Zebra-Tabelle mit CSS zu finden.

Vertikal

➤ Um den Effekt zu sehen, Bitte nach unten scrollen!

Namen 1	Namen 2	Namen 3
Maria	Makarius, Gregor, Otfried, Dietmar	Genoveva, Odilo, Irma
Angelika, Christiane	Emilia, Johann	Raimund
Reinhold, Valentin	Severin, Erhard, Gudula, Heiko	Adrian, Julian, Alice
Paul, Leonie	Thomas	Ernst, Tatjana, Xenia
Jutta, Hilmar, Hilarius	Rainer, Felix, Engelmar	Arnold, Romedius, Mauro, Arno
Marcel, Tilman, Dietwald, Uli	Anton, Rosalind	Margitta, Ulfried, Uwe
Mario, Pia, Martha	Fabian, Sebastian, Ursula	Agnes, Meinrad, Ines
Vinzenz, Dietlinde, Jana	Hartmut, Emerentia, Guido	Franz, Vera, Thurid, Bernd
Pauli, Wolfram	Timotheus, Titus, Paula	Angela, Alrun, Gerd
Manfred, Thomas, Karl, Karolina	Gerhard, Gerd, Josef	Martina, Adelgunde
Johannes, Marcella, Rudbert	Brigitta, Brigitte, Reginald, Barbara	Bodo, Stephan
Blasius, Ansgar, Oskar, Michael	Andreas, Veronika, Jenny	Agatha, Albuin
Dorothea, Doris, Paul	Richard, Ava, Ronan	Elfrieda, Hieronymus, Philipp
Apollonia, Anne-Kathrin, Anna, Katharina	Scholastika, Siegmar, Bruno	Theodora, Theodor
Benedikt, Eulalia	Christina, Irmhild, Adolf, Gisela	Valentin, Cyrill, Method
Siegfried, Jovita, Georgia	Juliana, Liane	Alexis, Benignus
Constanze, Simon, Simone	Irmgard, Irma, Hedwig	Corona, Falko, Jacinta
Petrus, Gunhild, Enrica, Peter	Petri Stuhlfeier, Isabella, Pit	Romana, Raffaela
Matthias	Walburga, Edeltraud	Gerlinde, Ottokar, Edigna, Denis, Mechthild
Gabriel, Marko, Baldur	Roman, Silvana, Oswald, Detlev	Oswald
Albin, Roger, Leontina	Volker, Agnes, Karl	Kunigunde, Camilla, Leif, Friedrich
Kasimir, Edwin, Humbert	Gerda, Olivia, Dietmar, Tim	Fridolin, Nicola, Rosa, Nicole
Reinhard, Felicitas, Perpet, Volker	Johannes, Gerhard	Franziska, Bruno, Barbara, Dominik
Emil, Gustav	Rosina, Alram, Ulrich	Beatrix, Almut, Serafina
Judith, Pauline, Leander	Mathilde, Eva, Evelyn	Klemens, Louise
Herbert, Rüdiger	Gertrud, Gertraud, Patrick	Edward, Sibylle, Cyrill
Josef, Josefa, Josefine	Claudia, Wolfram	Christian, Axel, Emilia


<style>

th {

 position: Sticky;

 top: 0;

}

</style>



<table>

<tr>

 <th>Foo</th>

 <th>Bar</th>

 <th>Baz</th>

</tr>

<tr>

 <td>-Inhalt-</td>

 <td>-Inhalt-</td>

 <td>-Inhalt-</td>

</tr>

 </table>

Horizontal

1	apple pie	cupcake	caramels	Donut	Fruitcake	Tiramisu	toffee	Fruitcake	marzipan	jelly beans		chocolate	Donut	Tiramisu	toffee	cupcake		Donut	chocolate	Fruitcake	Fruitcake	jelly beans	marzipan	Tiramisu		Donut	Tiramisu	toffee	cupcake	chocolate	Tiramisu	Donut	Fruitcake
2	caramels	Tiramisu	toffee	Donut	cupcake	-	Donut	Fruitcake	jelly beans	marzipan		chocolate	Fruitcake	toffee	apple pie	jelly beans	marzipan	apple pie	Tootsie		Donut	apple pie	cupcake	caramels	Donut	Fruitcake						Tiramisu


<style>
div.table-wrapper {
 overflow-x: Auto;
}

div.table-wrapper th {
 position: Sticky;
 left: 0;
 background: #BFFF80;
}

div.table-wrapper td {
 white-space: Nowrap;
}
</style>

<div class="table-wrapper">

<table>
<tr>
 <th>1</th>
 <td>apple pie</td>
 <td>cupcake</td>
 <td>Tiramisu</td>
 <td>toffee</td>
 <td>... weitere Spalten!</td>
</tr>
<tr>
 <th>2</th>
 <td>caramels</td>
 <td>Tiramisu</td>
 <td>toffee</td>
 <td>marzipan</td>
 <td>... weitere Spalten!</td>
</tr>
 </table>

</div>

Vertikal

Namen 1	Namen 2	Namen 3	Namen 4	Namen 5
Maria	Makarius, Gregor, Otfried, Dietmar	Genoveva, Odilo, Irma	Angelika, Christiane	Emilia, Johann
Raimund	Reinhold, Valentin	Severin, Erhard, Gudula, Heiko	Adrian, Julian, Alice	Paul, Leonie
Thomas	Ernst, Tatjana, Xenia	Jutta, Hilmar, Hilarius	Rainer, Felix, Engelmar	Arnold, Romedius, Mauro, Arno
Marcel, Tilman, Dietwald, Uli	Anton, Rosalind	Margitta, Ulfried, Uwe	Mario, Pia, Martha	Fabian, Sebastian, Ursula
Agnes, Meinrad, Ines	Vinzenz, Dietlinde, Jana	Hartmut, Emerentia, Guido	Franz, Vera, Thurid, Bernd	Pauli, Wolfram
Timotheus, Titus, Paula	Angela, Alrun, Gerd	Manfred, Thomas, Karl, Karolina	Gerhard, Gerd, Josef	Martina, Adelgunde
Johannes, Marcella, Rudbert	Brigitta, Brigitte, Reginald, Barbara	Bodo, Stephan	Blasius, Ansgar, Oskar, Michael	Andreas, Veronika, Jenny
Agatha, Albuin	Dorothea, Doris, Paul	Richard, Ava, Ronan	Elfrieda, Hieronymus, Philipp	Apollonia, Anne-Kathrin, Anna, Katharina
Scholastika, Siegmar, Bruno	Theodora, Theodor	Benedikt, Eulalia	Christina, Irmhild, Adolf, Gisela	Valentin, Cyrill, Method
Siegfried, Jovita, Georgia	Juliana, Liane	Alexis, Benignus	Constanze, Simon, Simone	Irmgard, Irma, Hedwig
Corona, Falko, Jacinta	Petrus, Gunhild, Enrica, Peter	Petri Stuhlfeier, Isabella, Pit	Romana, Raffaela	Matthias
Walburga, Edeltraud	Gerlinde, Ottokar, Edigna, Denis, Mechthild	Gabriel, Marko, Baldur	Roman, Silvana, Oswald, Detlev	Oswald
Albin, Roger, Leontina	Volker, Agnes, Karl	Kunigunde, Camilla, Leif, Friedrich	Kasimir, Edwin, Humbert	Gerda, Olivia, Dietmar, Tim
Fridolin, Nicola, Rosa, Nicole	Reinhard, Felicitas, Perpet, Volker	Johannes, Gerhard	Franziska, Bruno, Barbara, Dominik	Emil, Gustav
Rosina, Alram, Ulrich	Beatrix, Almut, Serafina	Judith, Pauline, Leander	Mathilde, Eva, Evelyn	Klemens, Louise
Herbert, Rüdiger	Gertrud, Gertraud, Patrick	Edward, Sibylle, Cyrill	Josef, Josefa, Josefine	Claudia, Wolfram
Christian, Axel, Emilia

<style>
tr#tabellenkopf {
 position: Sticky;
 top: 0px;
}

tr#tabellenkopf > th:nth-child(even) {
 background-color: rgba(207, 231, 250, 0.9);
}

tr#tabellenkopf > th:nth-child(odd) {
 background-color: rgba(188, 221, 248, 0.9);
}
</style>

 <table>
 <tr id="tabellenkopf">
  <th>Namen 1</th>
  <th>Namen 2</th>
  <th>Namen 3</th>
 </tr>
 <tr>
...

Table-Head und Table-Foot festsetzen

Spalte A	Spalte B	Spalte C	Spalte D	Spalte E	Spalte F	Spalte G	Spalte H	Spalte I
21.09.1993	19428	72649	44227	64220	18240	88329	36742	29066
08.05.1994	73802	27296	90694	5249	18363	2242	99692	8239
14.05.2001	81240	33757	24877	71797	75756	10507	42807	50692
18.02.2015	37404	10714	85680	54597	58124	32876	3784	11004
20.11.2000	60358	40649	26662	70985	78633	19667	34410	69417
29.06.2004	78041	63564	29620	64191	37717	96778	52177	43195
05.01.1995	61496	49785	93784	27418	47869	6569	90261	27178
01.05.2014	68212	66306	41162	74880	1044	4281	42910	22375
08.04.2009	27779	82276	66584	19331	97479	56825	22034	99452
01.12.1990	57382	63776	29672	23918	62919	19798	18394	25785
09.03.2012	93482	66511	4816	70377	27562	93346	23838	85331
22.03.2006	41314	29702	62833	28856	33278	5355	19436	32585
18.01.1992	44511	13258	13633	76777	35980	66456	80290	28435
22.01.2020	60661	76207	85150	91380	79459	89206	3131	68095
02.11.2019	54900	20347	96458	73091	27243	90483	45189	87075
21.05.1990	99459	1555	35847	91066	64115	67476	97379	87784
06.06.2014	29684	67698	22646	26452	62780	5590	49558	6657
01.07.2001	24123	99466	33151	25431	91690	51366	76375	22485
13.10.1992	30297	67423	55409	47404	89599	73748	776	70670
17.07.1990	13744	31400	1584	43465	57272	95745	8997	56688
04.08.2006	26143	7302	18373	93723	42158	96511	90054	98149
28.03.2014	62115	79448	89068	5817	84653	64166	61010	78824
12.04.2012	90049	45255	46788	85274	9628	82518	88783	43889
18.03.1991	95784	41682	84809	54211	93504	2265	76323	71331
06.04.2006	36750	19816	22449	36412	35195	74933	49874	26020
A	B	C	D	E	F	G	H	I

<style>
table thead,
table tfoot {
  position: sticky;
}

table thead {
  inset-block-start: 0; /* "top" */
}

table tfoot {
  inset-block-end: 0; /* "bottom" */
}
</style>

Siehe auch: JavaScript - HTML-Tabelle sortieren und CSV-Datei einlesen und dynamisch als Tabelle ausgeben

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<h1>-<h6> Überschrift

CSS - Verwendung von Datenattributen (data-*)

PHP - Einen Satz kürzen

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Datensätze über Checkbox-Auswahl suchen

Hintergrund-Sound
Ein gutes Mittel, um Besucher zu vergraulen. Hintergrundsound erhöht die Ladezeiten, hat eine billige Qualität und lässt sich oft nicht abschalten. Jeder hat einen anderen Musikgeschmack, den Sie so oder so fast nie treffen können. Daher bieten Sie einen Ein- und Ausschaltknopf für Hintergrundmusik an. So kann jeder Besucher individuell die Musik ein/ausstellen.