Table columns above header in Chrome

I have a html table with a sticky header. I need to fix it because in Chrome the top of column values can be seen above the header:

Top of table header

<div style="max-height: 700px; overflow-y: auto;"><table class="table table-sm table-striped table-hover"><caption hidden></caption><thead style="position: sticky; top: 0; background-color: white; z-index: 100;"><tr class="table-header"><th style="width: 5%"></th><th style="width: 10%;text-align: center; vertical-align: middle">          STUFF 1</th><th style="width: 10%;text-align: center; vertical-align: middle">          STUFF 2</th></tr></thead><tbody><tr *ngFor="let item of items"><td><input type="checkbox"></td><td style="text-align: center; vertical-align: middle">text</td><td style="text-align: center; vertical-align: middle">text</td></tr></tbody></table></div>

I tried modifying z-index, the height and padding of the header, using grid.