Sticky HTML table header almost works, but rows slightly visible above header

Question

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?

CodeSandbox

Answer 1

Those "little pixels" that you see are basically the data on the table. I would move slightly more above. Use

.react-bootstrap-table th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}

Sandbox: https://codesandbox.io/s/react-bootstrap-table-2-wppbz?file=/src/styles.css