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
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.