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

This can now be done without JS, just pure CSS. So, anyone trying to do this for modern browsers should look into using position: sticky instead.

Currently, both Edge and Chrome have a bug where position: sticky doesn't work on thead or tr elements, however it's possible to use it on th elements, so all you need to do is just add this to your code:

th {
  position: sticky;
  top: 50px;  /* 0px if you don't have a navbar, but something is required */
  background: white;
}

Note: you'll need a background color for them, or you'll be able to see through the sticky title bar.

This has very good browser support.

Demo with your code (HTML unaltered, above 5 lines of CSS added, all JS removed):

body {
    padding-top:50px;
}
table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

th {
  position: sticky;
  top: 50px;
  background: white;
}

    

        

             
 
 

             Project name

        
        

            

                
Home

                
                
About

                
                
Contact

                
                
 Dropdown 

                    

                        
Action

                        
                        
Another action

                        
                        
Something else here

                        
                        

                        
Nav header
                        
Separated link

                        
                        
One more separated link

                        
                    
                
            
        
        
    



    

         
Sticky Table Headers

    
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    

        

            

                
#
                
First Name
                
Last Name
                
Username
            
        
        

            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
        
    
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
    
If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.
     
Table 2

    

        

            

                
#
                
New Table
                
Last Name
                
Username
            
        
        

            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter
            
            

                
1
                
Mark
                
Otto
                
@mdo
            
            

                
2
                
Jacob
                
Thornton
                
@fat
            
            

                
3
                
Larry
                
the Bird
                
@twitter