How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

Question

Bootstrap layout with fixed-navbar. Having table with so many rows in body.

Issue? As i scroll the page navigation-bar will be there be

Answer 1

You can do it easily with puse CSS without any kind of JS. you have to add position: sticky; top: 0; z-index:999; in table th . But this won't work on Chrome Browser but other browser. To work on chrome you have to add those code in table thead th

.table-fixed {
  width: 100%;
}

/*This will work on every browser but Chrome Browser*/
.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #000;
  color: #fff;
}

/*This will work on every browser*/
.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
    background-color: #000;
    color: #fff;
}

  

    

        
Table Header 1
        
Table Header 2
        
Table Header 3
    
  
  

    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data
    
    

        
Data
        
Data
        
Data