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