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