Content behind sticky header is visible in scrollable table

user_13903711 0
Viewed 2499

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>

scrollable bootstrap-4 html-table css html
3 Answers

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...

user_148526930

Move the sticky header a pixel or 2 in the direction content is showing. So, if the sticky header is showing content from the top. Just move the header a little bit up using top in css. This should move your header so that the content doesn't leak through.

user_121569760

Without using position as sticky

Add class to the th

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

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

Add css to class stick-nav

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

.tableUpdates thead th {
    margin-top:0px;
    top: 0;
    background: #DC3545;
}
.stick-nav {
   position:'fixed' # fixed the nav bar positon
   z-index:999  # hide the content
}
user_135475310
Related