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	jelly beans	marzipan	Tiramisu	chocolate	Donut	Tiramisu	toffee
2	caramels	Tiramisu	toffee	Donut	cupcake	Tiramisu	Donut	Fruitcake	toffee	apple pie	jelly beans	marzipan


<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>
</tr>
 <th>2</th>
 <td>caramels</td>
 <td>Tiramisu</td>
 <td>toffee</td>
 <td>marzipan</td>
</tr>
 </table>

</div>

Bausteine

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

CSS - Container horizontal drehen

PHP - Datei nach dem herunterladen autom. löschen

JavaScript - Cookies aktiv

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array