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> ...
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.
<doctype> Dokumententyp
CSS - Elemente ab einer bestimmten Fensterbreite ausblenden