position:sticky funktioniert nicht

[Linuchs]

Moin,

bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

Nun möchte ich einen Absatz <p> sticky machen, nämlich das Datum für folgende Veranstaltungen. Die Angabe wird ignoriert, <p> wird weggescrollt.

<p style="margin-top:1em;position: sticky;"><b><span>Mittwoch, 02.09.2020</span></b></p>
<p>18:00 ...</p>
<p>20:00 ...</p>

Woran liegt das?

Linuchs

[JürgenB]

Hallo,

bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

bei mir nicht.

Gruß
Jürgen

[Linuchs]

Du wendest sticky auf einen Tabellenkopf an. Ich aber habe keine Tabelle und konnte in den Dokumentationen diese Bedingung nicht finden.

Linuchs

[JürgenB]

Hallo

ok, dann habe ich

bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

falsch verstanden.

Ich schließe mich Martins Vorschlag an.

Gruß
Jürgen

[Der Martin]

Hallo,

bisher habe ich position:sticky nur auf thead angewendet. Bleibt zwar am oberen Rand des viewport stehen, wird aber transparent (Firefox), kann man kaum lesen, wenn die Tabellenzeilen darunter sind.

dann gib den td- oder th-Elementen eine Hintergrundfarbe. Fixed.

Nun möchte ich einen Absatz <p> sticky machen, nämlich das Datum für folgende Veranstaltungen. Die Angabe wird ignoriert, <p> wird weggescrollt.

<p style="margin-top:1em;position: sticky;"><b><span>Mittwoch, 02.09.2020</span></b></p>
<p>18:00 ...</p>
<p>20:00 ...</p>

Du ordnst zwar sticky an, aber ohne Positionsangabe.

Live long and pros healthy,
 Martin

[Linuchs]

Hallo Martin,

ich korrigiere mich: Der <thead> ist vermutlich nicht transparent, sondern <tbody> schiebt sich drüber. Braucht thead ein z-index?

table.liste thead {
    position: sticky;
    top: 5px;
    background-color: #fe0;
}

Du ordnst zwar sticky an, aber ohne Positionsangabe.

Danke, der Tipp war's.

Linuchs

[Der Martin]

Hi,

ich korrigiere mich: Der <thead> ist vermutlich nicht transparent

soweit ich weiß, ignorieren die Elemente thead, tbody und tfoot so einige visuelle Eigenschaften, weil sie nur zur strukturellen Auszeichnung da sind.

sondern <tbody> schiebt sich drüber. Braucht thead ein z-index?

Nicht dass ich wüsste. Aber ich habe auch vor einiger Zeit irgendwo ein "Kochrezept" für Tabellen mit feststehender Kopfzeile gelesen, wo betont wurde, dass man sticky nicht auf thead anwenden sollte, sondern auf die darin enthaltenen th. Zusätzlich, so der Autor dieses Rezepts, brauche die Tabelle selbst noch ein position:relative. Die genaue Erklärung habe ich aber nicht mehr im Kopf.

Für deinen Fall also:

table.liste
 { position: relative;
 }
table.liste thead th
 { position: sticky;
   top: 5px;
   background-color: #fe0;
 }

Du ordnst zwar sticky an, aber ohne Positionsangabe.

Danke, der Tipp war's.

De nada. Das ist so ähnlich wie: "Geh bloß nicht näher ran!" - "Woran?"

Live long and pros healthy,
 Martin

[JürgenB]

Hallo Martin,

warum verlinke ich eigentlich eine scrollbare Tabelle 😟.

Gruß
Jürgen

[Der Martin]

n'Abend Jürgen,

warum verlinke ich eigentlich eine scrollbare Tabelle 😟.

als Beweis, dass es geht? - Immerhin präsentierst du auch nur eine Lösung, aber nicht die Erklärung, warum es so funktioniert (und anders möglicherweise nicht).

Live long and pros healthy,
 Martin

[JürgenB]

Hallo Martin,

bisher hat niemand danach gefragt. Wir haben das vor geraumer Zeit (2 Jahre?) mal hier diskutiert und ich habe dann meinen Entwurf daraus gebaut. Getestet in Safari, MasOS FF, Windows FF, Windows Chrome, alter und neuer Edge, IOS-Safari und "irgendein" Android-Browser.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Der Martin

soweit ich weiß, ignorieren die Elemente thead, tbody und tfoot so einige visuelle Eigenschaften, weil sie nur zur strukturellen Auszeichnung da sind.

??

Alle HTML-Elemente sind „nur“ zur strukturellen Auszeichnung da.

Dass thead, tbody und tfoot so einige CSS-Eigenschaften ignorieren, liegt daran, dass die Chromium-Entwickler ihre Prioritäten anders setzen als ihre Browserbugs zu fixen.

In Firefox funktioniert das nämlich.

😷 LLAP