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

For somebody, who is still looking for a solution and isn't satisfied with the accepted one.

1) Use sticky-top class on th element.

2) With own class

th.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /*To not have transparent background.
  background-color: white;*/
}

  

    

      
1
      
2
      
3
      
4
    
  
  

    

      
1
      
2
      
3
      
4
    
    

      
1
      
2
      
3
      
4
    
    

      
1
      
2
      
3
      
4