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
24.12.2010 34226 74651 59395 22336 24383 8497 59434 68150
10.12.2011 60612 13580 39255 50852 62615 24834 23304 85342
20.12.1995 95392 88367 75819 27160 95458 89789 7369 62004
25.07.1993 47450 52170 92345 67472 58781 74864 75123 9392
03.12.2016 58943 56039 95013 86 44883 3936 51252 42381
22.05.2016 34512 56344 70788 57750 39779 23452 69813 60267
26.09.2013 24612 2780 4661 43672 78849 81236 83796 50430
06.07.1994 50628 11650 86291 3819 47808 87204 67776 79447
25.10.1998 22617 37314 57659 78687 25453 76869 32228 39213
28.02.1992 8927 1221 55308 23327 60346 88594 92073 65672
03.09.2005 11527 42158 23698 82487 11508 37039 2075 33464
19.01.2007 97131 71958 15214 64264 99240 79640 24430 80819
02.10.2016 4139 34822 26705 13811 27417 51229 74739 87555
01.03.2009 10344 17917 22847 3801 47495 43887 29852 65003
06.09.2008 93537 70525 85331 9830 86425 27994 38608 63189
19.05.2008 92214 87047 96830 9808 1349 18221 66815 9157
29.08.1994 12100 81309 57712 71065 34675 98266 80340 85415
20.02.2016 17141 4918 75825 48618 38084 51666 5 62654
14.08.2009 22558 42938 93375 64827 78219 4830 23896 31826
07.02.1996 55224 61373 36645 13545 45575 77900 67714 10047
22.10.2007 58465 3879 56631 17238 13143 29492 87215 95161
17.12.2020 17429 50961 84320 48993 21249 44471 59050 76863
16.08.2012 67173 76850 91851 76839 80924 36109 4084 49869
12.07.1995 47633 96848 75903 56850 87237 44286 76721 13988
05.09.1998 42025 50633 94786 84669 29395 7040 67068 55034
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.

<u> Unterstreichen (Physische Auszeichnung)

CSS - HTML-Elemente als Tabelle formatieren

PHP - Exif-Infos eines JPG-Bildes auslesen

JavaScript - CSS über Javascript einbinden

MySQL - Höchstwert einer Spalte ermitteln

100% Text
Eine Seite sollte nicht nur mit 100% Text gefüllt sein. Lockern Sie die Seite auf zum Beispiel mit verschieden großen Absätzen, farbigen Überschriften, Bildern und Hyperlinks. Vom großen Vorteil ist, wenn der Text nicht über die ganze Browserseite geht. Mit Tabellen können Sie die Textbreite leicht begrenzen => bessere Lesbarkeit und Übersicht.