Таблица с липкими заголовками на прозрачном фоне ⇐ CSS

[Anonymous]

У меня есть таблица с прозрачной строкой заголовка.
Я хочу, чтобы строка заголовка была закреплена, но когда я это делаю, когда я прокручиваю таблицу вертикально, другие строки таблицы прокручиваются позади. заголовок, и поскольку он прозрачен, он отображается.
таблица
за заголовком
Я пытался сделать прокручиваемым только элемент , но это усложняет задачу поскольку полоса прокрутки теперь сдвигает тело влево, когда оно появляется, оставляя тело не выровненным по горизонтали с классом

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

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}

td {
background-color: brown;
}

.sticky-header {
position: sticky;
top: 0;
background-color: transparent;
}

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

 


Header 1
Header 2
Header 3



Row 1, Col 1Row 1, Col 2Row 1, Col 3
Row 2, Col 1Row 2, Col 2Row 2, Col 3
Row 3, Col 1Row 3, Col 2Row 3, Col 3
Row 4, Col 1Row 4, Col 2Row 4, Col 3
Row 5, Col 1Row 5, Col 2Row 5, Col 3
Row 6, Col 1Row 6, Col 2Row 6, Col 3
Row 7, Col 1Row 7, Col 2Row 7, Col 3
Row 8, Col 1Row 8, Col 2Row 8, Col 3
Row 9, Col 1Row 9, Col 2Row 9, Col 3

Подробнее здесь: https://stackoverflow.com/questions/791 ... nd-headers