I have a table that has a transparent header row
I want the header row to be sticky but when I do that when I scroll vertically the table the other table rows are scrolling behind the header and since it is transparent, it is shown.tablebehind the header
I tried making only the <tbody> element scrollable but that makes things difficult since the scrollbar now pushes the tbody to the left when it appears leaving the tbody not horizontally aligned with the <thead>
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;}<table><thead><tr class="sticky-header"><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td></tr><tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td></tr><tr><td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td></tr><tr><td>Row 4, Col 1</td><td>Row 4, Col 2</td><td>Row 4, Col 3</td></tr><tr><td>Row 5, Col 1</td><td>Row 5, Col 2</td><td>Row 5, Col 3</td></tr><tr><td>Row 6, Col 1</td><td>Row 6, Col 2</td><td>Row 6, Col 3</td></tr><tr><td>Row 7, Col 1</td><td>Row 7, Col 2</td><td>Row 7, Col 3</td></tr><tr><td>Row 8, Col 1</td><td>Row 8, Col 2</td><td>Row 8, Col 3</td></tr><tr><td>Row 9, Col 1</td><td>Row 9, Col 2</td><td>Row 9, Col 3</td></tr></tbody></table>