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
10.12.1998	48592	10730	96671	24064	53162	90764	90540	25769
15.06.1992	45497	63067	73153	37579	61514	66178	1071	91700
23.10.1993	6727	77278	42333	51688	25	92547	18797	50984
20.01.2002	60455	77091	9318	91233	16007	49600	40085	60816
15.10.2018	4892	84290	49345	78311	9694	44861	72046	47647
20.11.2013	78778	87111	39501	23103	64497	62883	43450	84747
16.12.1997	21236	45322	68891	91210	73701	41197	99240	94540
04.07.2009	82542	30881	78992	40918	59499	8633	39740	66017
01.12.2012	73145	9158	28806	90667	59025	80382	58325	48605
16.07.2014	36276	57631	62570	41919	24517	37765	50394	35074
14.05.1997	8547	824	96214	91580	15998	40379	954	48663
11.01.2004	33454	18744	6161	94770	11697	1853	52824	42618
19.11.2003	25917	29719	54553	48769	48200	43126	86496	57067
17.01.2002	61535	35906	14713	10462	54325	59237	43376	66446
23.05.1994	61084	25336	56366	12254	98711	12881	44146	13555
18.12.2010	51935	9859	76830	8079	93116	51354	86230	97756
30.07.2011	71846	25072	34243	84775	49219	42641	22210	60605
27.06.2008	98895	27016	89619	94516	13307	14448	17548	91400
24.03.1997	97530	27925	60947	45495	15164	43703	93283	84128
12.07.2004	81065	47448	87823	22107	34945	39153	50382	84457
15.04.2019	7222	16418	30519	27469	3768	50222	5998	51980
21.08.1991	83403	20270	78028	42082	30360	57427	47986	55707
13.03.2002	30760	59500	53254	67725	45744	55384	36544	75364
18.03.2009	80593	7680	67642	90149	65053	30897	72675	31543
19.11.2012	43490	53234	97194	19845	10721	10220	19358	52093
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.

<doctype> Dokumententyp

CSS - Navigation mit :target auf und zumachen

PHP - Zahlen schneller ausgeben

JavaScript - HTML-Tabelle sortieren

MySQL - Das Datum und die Uhrzeit der letzten Stunde anzeigen

Lernen beim Arbeiten
Viele Fehler werden beim Arbeiten an der Homepage erkannt und im weiteren Verlauf vermieden (Etwas daraus gelernt!). Auch das Lernen durch Ausprobieren, zum Beispiel einen bestimmten Wert einfach erhöhen und sehen was dann passiert ist sehr lehrreich.