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-xAuto;
}

th {
 
positionSticky;
 
top0;
}
</
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 1Namen 2Namen 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 {
 
positionSticky;
 
top0;
}
</
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-xAuto;
}

div.table-wrapper th {
 positionSticky;
 left0;
 background#BFFF80;
}

div.table-wrapper td {
 white-spaceNowrap;
}
</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 1Namen 2Namen 3Namen 4Namen 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.