1

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: HTML table

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.

JLCarveth
  • 93
  • 8

1 Answers1

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;
}
Evan Summers
  • 942
  • 4
  • 13
  • This *almost* has the effect I need. Only, it forces all columns to be under the first header. Removing `display-block` fixes that issue, but the header stops being sticky again – JLCarveth Sep 19 '22 at 12:31
  • 1
    Maybe try setting `display: table;` on `tr` as well. There's some more info here: https://stackoverflow.com/a/23989771/16811479 – Evan Summers Sep 19 '22 at 12:32