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

 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 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
09.02.1996 46671 72884 72741 87881 86660 74659 91903 26033
05.01.1996 20858 62123 87249 80969 58875 58687 23372 16106
15.05.1996 78926 70032 66439 20065 83280 41862 69310 16598
25.06.2002 42408 51177 73830 31449 4447 44177 97725 8795
07.10.1992 97377 40709 66761 74559 17317 23393 64840 32841
25.01.2017 21782 9811 92979 22993 31407 8402 59740 56148
29.09.2009 6285 5582 80508 62080 61323 55623 35858 51110
02.05.2012 33401 78661 12909 82513 66299 98435 11685 8074
04.04.2003 90480 65442 75384 45535 72252 9737 7493 44488
05.03.2020 50957 89952 47800 44891 12964 28721 78688 11157
25.11.2011 45858 85987 79201 50227 7060 38938 25599 29637
11.12.2006 3289 12351 77490 43177 95219 85808 97825 91147
21.12.1992 82119 92709 47437 10047 43874 1580 87222 66921
19.10.2003 11279 91542 6583 46913 86129 54245 15932 56754
12.02.2004 23321 41772 89782 92034 39639 68119 20011 24646
09.03.2020 59460 62749 85686 60516 22371 22592 34044 2480
15.03.2020 22504 66690 23282 40778 26089 30902 83708 7612
19.01.2002 61024 67189 87328 12267 19787 86587 9340 87002
18.10.2010 61992 1754 93577 5938 51971 48084 26633 29395
20.05.2003 1608 68222 5410 91426 14248 42594 47218 61626
26.08.1996 13795 87347 31121 22548 59158 62174 93145 46024
02.09.2016 30347 10519 29787 23144 29194 83835 27142 79893
09.12.1992 87997 69470 56067 28794 31772 87362 54204 14062
19.10.2016 23207 39595 78168 41301 3143 96985 32395 94458
20.11.2002 15967 4136 80482 29274 88766 7223 22591 33206
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>

Bausteine  Alle Anzeigen

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

<i> Kursiv (Physische Auszeichnung)

CSS - Sternebewertung

PHP - Verwendung von str_split() und chunk_split()

JavaScript - Cookies setzen und löschen

MySQL - Datensätze auswählen