I have a table that has 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.
table
behind 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>
<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>
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;
}
You need to sign in to view this answers
Leave feedback about this