Как сделать заголовок горизонтально прокручиваемой таблицы липким? ⇐ Html

[Anonymous]

Предположим, что у нас есть простой макет с фиксированным заголовком и прокручиваемым основным контейнером. В основном контенте я хотел бы отобразить таблицу (горизонтально прокручиваемую) с прикрепленным заголовком. Как это возможно?
Я подготовил следующий JSFiddle, чтобы продемонстрировать проблему.

Код: Выделить всё

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

Код: Выделить всё

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.

Думаю, именно в этом причина того, что он не работает (см. документацию:)

Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, который имеет «механизм прокрутки» (создается, когда переполнение скрыто, прокрутка, auto или overlay), даже если этот предок не является ближайшим предком с прокруткой.

Мне интересно, есть ли какой-нибудь обходной путь в 2025 году для достижения этой цели?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ble-sticky