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-xAuto;
}

th {
 
positionSticky;
 
top0;
}
</
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>

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 {
 
positionSticky;
 
top0;
}
</
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 jelly beans marzipan Tiramisu chocolate Donut Tiramisu toffee
2 caramels Tiramisu toffee Donut cupcake Tiramisu Donut Fruitcake toffee apple pie jelly beans marzipan

Bausteine

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - Den längsten Schlüssel in einem Array anzeigen

JavaScript - Prüfen, ob die Zahl gerade oder ungerade ist

MySQL - Den nächsten und vorherigen Datensatz ermitteln