How to fix Table Headers at the top using CSS?

Question

I want my Table Headers to be fixed at the top and I am using Position: sticky; in thead
but they remain fixed only halfway through the scrolling and after that they move along with it.

This is what I have done

<table>
    <thead>
        <th>Firstname</th>
        <th>Lastname</th>
    </thead>
    <tbody>
        <tr>
            <td class="scroll-table">John</td>
            <td class="scroll-table">Doe</td>
        </tr>
    </tbody>
</table>

CSS I am using

table thead{
    position: sticky;
    top: 0;
    z-index: 11;
}

I want the thead to stick at the top during Scrolling

Answer 1

Try to apply this values for the th elements instead of thead:

table th {
    top: 0;
    position: sticky;
    z-index: 11;
}