making border-spacing opaque

I have a page where I am making a table with a fixed thead section and the rest of the table scrollable. It works, but there is a small issue with border-spacing between table cells. I am not changing the value, so it remains set to the default of 2px. However, when the lower section of the table scrolls up, you can see it as it passes through the transparent border-spacing. How do I go about making the spacing opaque so what’s behind it is no longer visible?

Also, when I scroll the table up, the thead section moves up one pixel-row. It is supposed to be fixed, so I don’t know what’s causing that to happen either. The border-collapse and table-layout properties had no effect, which is why they are commented out. There is no specific html code to show, since the css operates directly on the table and thead tags.

`
table {
margin:auto;
/* border-collapse:separate;
table-layout:fixed;*/
}

/* freeze panes */
/* rows */
thead {
position:sticky;
top:0;
min-height:48px;
height:48px;
z-index:50;
background-color:white;
}
`

Also in #CSS _↴