CSS-Only Sticky Table Headers In Chrome

Question

I have the following Sass snippet in which I want the to float as the table scrolls. This works properly in Safari, but not in Chrome Versio

Answer 1

position: sticky doesn't work with some table elements (thead/tr) in Chrome. You can move sticky to tds/ths of tr you need to be sticky. Like this:

.table {
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

Also this will work.

.table {
    position: sticky;
    top: 0;
    z-index: 10;
}

You can move header to separate layout. For example:

    

    

        
1
        
2
        
3
        
4
    
    


    

    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4