Как заморозить таблицу HTML на нескольких столбцах и рядах с CSS? ⇐ Html

[Anonymous]

Я пытаюсь создать таблицу с 2 строками заголовка, а 3 столбца заморожены, когда она прокручивается горизонтально и вертикально.
Мой код здесь для лучшего просмотра Я делал до сих пор, играя на этом стиле CSS < /p>
table th {
position: sticky;
top: 0;
background-color: #133b5c;
/* Dark header background */
color: white;
text-align: center;
font-weight: bold;
font-size: 18px;
padding: 12px 10px;
border-bottom: 2px solid #0f2c48;
z-index: 3;
/* Ensures headers stay on top */
}

< /code>
и < /p>
table th:nth-child(1),
table td:nth-child(1) {
position: sticky;
left: 0;
background-color: #ffebb5;
color: #333;
font-weight: bold;
border-right: 2px solid #bbb;
}

table th:nth-child(2),
table td:nth-child(2) {
position: sticky;
left: 150px;
/* Adjust based on the width of the first column */
background-color: #ffebb5;
color: #333;
font-weight: bold;
border-right: 2px solid #bbb;
}

table th:nth-child(3),
table td:nth-child(3) {
position: sticky;
left: 300px;
/* Adjust based on the combined width of the first two columns */
background-color: #ffebb5;
color: #333;
font-weight: bold;
border-right: 2px solid #bbb;
}

table th:nth-child(1),
table td:nth-child(2),
table td:nth-child(3) {
z-index: 2;
}

table th:nth-child(2),
table td:nth-child(2) {
left: 63px;
/* Adjust based on column width */
}

table th:nth-child(3),
table td:nth-child(3) {
left: 228px;
/* Adjust based on column width */
}

< /code>
Но это не то, что я ожидал. 1 -я строка заголовка не замораживается, а 3 столбца перекрываются. .gif " /> < /p>
Пожалуйста, сообщите. < /p>

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