Wie mache ich die Kopfzeile einer horizontal scrollbaren Tabelle klebrig? ⇐ CSS

[Anonymous]

Nehmen wir an, Sie hätten ein einfaches Layout mit einer festen Kopfzeile und einem scrollbaren Hauptcontainer. Innerhalb des Hauptinhalts möchte ich eine Tabelle (horizontal scrollbar) mit einem Sticky-Header rendern. Wie ist das möglich?
Ich habe die folgende JSFiddle vorbereitet, um das Problem zu demonstrieren.

Code: Select all

body {
margin: 0;
padding: 0;
}

section {
height: 100vh;
display: flex;
flex-direction: column;
}

header {
height: 100px;
background-color: green;
}

main {
margin: 16px;
overflow-y: auto;
background-color: lightgrey;
flex-grow: 1;
position: relative;
}

.table-container {
/* Position sticky does not work because of this property. */
overflow-x: auto;
}

th {
background-color: red;
position: sticky;
top: 0;
}

Code: Select all

My Header



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.





Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10
Column 11
Column 12
Column 13
Column 14
Column 15
Column 16
Column 17
Column 18
Column 19
Column 20





R1, C1
R1, C2
R1, C3
R1, C4
R1, C5
R1, C6
R1, C7
R1, C8
R1, C9
R1, C10
R1, C11
R1, C12
R1, C13
R1, C14
R1, C15
R1, C16
R1, C17
R1, C18
R1, C19
R1, C20



R2, C1
R2, C2
R2, C3
R2, C4
R2, C5
R2, C6
R2, C7
R2, C8
R2, C9
R2, C10
R2, C11
R2, C12
R2, C13
R2, C14
R2, C15
R2, C16
R2, C17
R2, C18
R2, C19
R2, C20



R3, C1
R3, C2
R3, C3
R3, C4
R3, C5
R3, C6
R3, C7
R3, C8
R3, C9
R3, C10
R3, C11
R3, C12
R3, C13
R3, C14
R3, C15
R3, C16
R3, C17
R3, C18
R3, C19
R3, C20




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Ich denke, das ist der Grund, warum es nicht funktioniert (siehe Dokumentation:)

Beachten Sie, dass ein Sticky-Element an seinem nächsten Vorfahren „klebt“, der über einen „Scroll-Mechanismus“ verfügt (erstellt, wenn der Überlauf ausgeblendet, Scroll, Auto oder Overlay ist), auch wenn Dieser Vorfahre ist nicht der nächste tatsächlich scrollende Vorfahre.

Ich frage mich, ob es im Jahr 2025 eine Problemumgehung gibt, um dies zu erreichen?