Установление липкого заголовка стола с горизонтальным свитком в прокручиваемом контейнере ⇐ Javascript

[Anonymous]

Описание задачи:
У меня есть макет, где фиксированное меню занимает левую сторону видового порта, занимая полную высоту. С правой стороны у меня есть таблица, которая динамически загружает данные при прокрутке. Таблица включает как заголовок, так и нижний колонтитул. .
Однако, когда я установил Overflow-x: Auto; На контейнере. Верх: 0; Чтобы сохранить его исправлено.
Я завернул стол в Div с переполнением-X: Auto;, но это заставляет липкое поведение прекратить работу.
Я также пытался установить положение: липкий; непосредственно в TH -элементах, но это не помогло.
Я попытался использовать Display: Block; На заголовке таблицы, но это повлияло на выравнивание столбцов.
Что я ожидал:
Я хочу, чтобы заголовок таблицы оставался липким в верхней части видового тома при вертикальной прокрутке, а также позволяя горизонтально прокручивать в. Div.
Ссылка: https://codepen.io/amit-soni-the-vuer/p ... qveобразно



header





Fixed Column
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10










.container {
max-width: 1350px;
padding: 0;
@media (max-width: 1350px) {
padding: 0 15px;
}
@media (max-width: 991.98px) {
padding: 0 15px;
}
}
.d-flex {
display: flex !important;
}
.align-items-start {
align-items: flex-start !important;
}
.gap-30 {
gap: 30px;
}

.menu-main-wrapper {
background: linear-gradient(93.39deg, rgba(113, 113, 113, 0.62) 0.08%, rgba(113, 113, 113, 0) 79.29%);
padding: 0 1px;
height: 100svh;
width: 25.25%;
position: -webkit-sticky;
position: sticky;
z-index: 10;
top: 0;
}
@media screen and (max-width: 1133.98px) {
.menu-main-wrapper {
display: none;
}
}

.page-main-wrapper {
width: 74.75%;
}
@media screen and (max-width: 1133px) {
.page-main-wrapper {
width: 100%;
}
}

.content {
width: 100%;
}

.table-wrapper {
width: 100%;
}

/* Table styling */
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 100px;
margin-bottom: 20px;
}
th,
td {
padding: 10px;
white-space: nowrap;
border-bottom: 1px solid green;
}
thead th {
position: sticky;
top: 0;
background: #686161;
z-index: 2;
}
th:first-child,
td:first-child {
position: sticky;
left: 0;
background: #7e4545;
z-index: 1;
border-right: 1px solid blue;
}
thead th:first-child {
z-index: 3;
border-top-left-radius: 10px;
border-top: 1px solid red;
}

.header, .footer{
height:100px;
background:blue;
text-align:center;
margin:30px 0;
}
let rowCount = 20;
const tbody = document.querySelector('#dataTable tbody');

// Function to generate a table row (simulate fetched data)
function generateRow(index) {
return `

Row ${index} - Fixed
Row ${index} - Col2
Row ${index} - Col3
Row ${index} - Col4
Row ${index} - Col5
Row ${index} - Col6
Row ${index} - Col7
Row ${index} - Col8
Row ${index} - Col9
Row ${index} - Col10

`;
}

// Insert initial rows
for (let i = 1; i = document.body.offsetHeight - 100 && !loading) {
loading = true;
// Simulate API call delay (replace with your actual API call)
setTimeout(() => {
for (let i = rowCount + 1; i

Подробнее здесь: https://stackoverflow.com/questions/794 ... -container