Content behind sticky header is visible in scrollable table

Question

The current issue looks like this As shown in the picture, the content is still a little bit visible when it is scrolled behind the header. How do i solve this and make the content not visible when scrolled behind the sticky header?

.tableUpdates {
        overflow-y: auto;
        height: 250px;
    }

    .tableUpdates thead th {
        position: sticky;
        margin-top:0px;
        top: 0;
        background: #DC3545;
    }

<div class="col-md-4 pr-0 tableUpdates">
    <table class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th>Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>


    

Answer 1

This is a weird quirk with table and th elements. If either element has a top border you will get this behavior. The border actually scrolls and doesn't stick, leaving that gap.

One hack is to override border-top to have width of 0 for both table and th elements.

CSS

#myTable {
    border-top: 0 solid black;
}

#myHeader {
    border-top: 0 solid black;
}

HTML

<div class="col-md-4 pr-0 tableUpdates">
    <table id="myTable" class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th id="myHeader">Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>

Of course, then you don't have a top border...