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” aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Mit ::selection markierten Text hervorheben
PHP - Counter für Seitenaufrufe
JavaScript - Position der Einfügemarke in einem Textfeld ermitteln