I'm using a React table library called react-bootstrap-table2. It doesn't have a way to make the top row sticky, so I added the following CSS:
.table-container {
overflow-y: auto;
max-height: 500px;
}
.react-bootstrap-table th {
position: sticky;
top: 0;
background-color: #fff;
}
The resulting table header is now sticky, but as I scroll through the rows, I can see a few pixels of the row at the top of the header. If you look at the image below under "Sample Table", you'll see what look like dots. But if I add padding: 10px; to the CSS, it becomes apparent that it's row content that's appearing above the header. Is there any way to prevent this behavior?
