Table Sticky header - Only the text is moving

Question

I am making a table using react-bootstrap link Table component:

<Table ordered hover>
    <thead>
        <tr>
            <th>Headers...</th> ...
        </tr>
    </thead>
    <tbody>
        <tr><td>Content here...</td></tr>
    </tbody>
</Table>

Table content has been omitted for brevity. This table has a lot of content, and thus I want the table's content to be scrollable, with the table header remaining sticky at the top. Here is the CSS I am using to accomplish this:

.container {
    height: 95vh;
}

table {
    overflow: scroll;
}

thead th { positon: sticky; top: 0px; }

The problem is, on scroll, only the header's text remains stuck to the top. Meaning I can see the header's text, as well as the table's data directly below the header text. See image:

How can I make the header "background" sticky as well, so that the header can be read properly? The screenshot was taken in Firefox, though I can confirm it happens in Chrome as well.

Answer 1

You probably don't need position sticky for this. Just make the tbody the part that is scrollable instead:

tbody {
  max-height: 95vh;
  overflow-y: scroll;
  display: block;
}