Как получить заголовок строк и столбцов в столе оставаться на вершине, когда он прокручивается ⇐ Html

[Anonymous]

Далее от этого:
поток < /p>
Я хочу иметь левые столбцы шириной и динамическим положением. Потому что он сохраняет изменения, когда я настраиваю текст заголовка.

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

 document.addEventListener("DOMContentLoaded", function() {
const table = document.querySelector("table");
const headers = table.querySelectorAll("th");
const rows = table.querySelectorAll("tr");

let leftOffset = 0;

for (let i = 0; i < 3; i++) {
const columnWidth = headers[i].offsetWidth; // Get actual width of each column

// Apply sticky positioning to the first three columns
headers[i].style.position = "sticky";
headers[i].style.left = `${leftOffset}px`;
headers[i].style.zIndex = "10"; // Ensure row headers stay above regular cells
//headers[i].style.background = "#fff"; // Prevent overlapping transparency

rows.forEach(row => {
const cell = row.cells[i];
if (cell) {
cell.style.position = "sticky";
cell.style.left = `${leftOffset}px`;
cell.style.zIndex = "5";
cell.style.background = "#fff"; // Prevent content from showing through
}
});

leftOffset += columnWidth;
}

// Make the first row (column headers) sticky
const firstRow = table.querySelector("tr");
if (firstRow) {
firstRow.querySelectorAll("th").forEach(header => {
header.style.position = "sticky";
header.style.top = "0px"; // Stick to the top
header.style.zIndex = "15"; // Keep it above other headers but below intersections
//header.style.background = "#fff"; // Prevent overlap issues
});
}

// Fix the intersection where the first row AND first three columns meet
for (let i = 0; i < 3; i++) {
const cell = firstRow.cells[i];
if (cell) {
cell.style.zIndex = "20"; // Highest priority for top-left corner cells
cell.style.background = "#fff"; // Prevent layering issues
}
}
});

Не все строки заголовков и Cols прилипаны:

Я считаю, что это не так, но я не получаю, но я не получаю, но я не получаю, но я не получаю, но я не получаю. /> Проблема состоит в том, что:
Второй заголовок строки (или второй), когда таблица прокручивается горизонтально вправо, он перекрывает (в верхней части элемента) столбцы с левой стороны, предполагается, что под элементом столбцов. < /p>
Эти элементы < /p>
< /p>
< /p>
< /p>
< /p>

< /p>
< /p>

< /p>
< /p>

< /p>
< /p>

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

Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
< /code>
перекрывает это: < /p>

и строки в tbode, когда он прокручивает вертикально, он перекрывает эти тоже.

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