Table with sticky transparent background headers

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

Related Post