Currently, I am in the process of creating a table with the help of the react-bootstrap library's Table component. You can find more information about this component by following this link.
<Table ordered hover>
<thead>
<tr>
<th>Headers...</th> ...
</tr>
</thead>
<tbody>
<tr><td>Content here...</td></tr>
</tbody>
</Table>
The main issue at hand is that this table contains a significant amount of data, prompting me to seek a solution where the content scrolls while keeping the header fixed at the top. To achieve this functionality, I have utilized specific CSS styles:
.container {
height: 95vh;
}
table {
overflow: scroll;
}
thead th { positon: sticky; top: 0px; }
After implementing these styles, upon scrolling, only the text within the header remains fixed at the top, causing an overlap between the header text and the data below it. This problem is illustrated in the screenshot linked below (observed on both Firefox and Chrome): https://i.sstatic.net/vsQ54.png
To address this issue effectively, how can I ensure that not only the header text but also its background remains sticky? This adjustment is crucial for enhancing readability within the table. Thank you for your assistance.