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 |
---|---|---|---|---|---|---|---|---|
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-*)
JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen