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

https://jsfiddle.net/y9cwnb81/4/

div.table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;

  grid-template-areas:
    "header header header"
    "content content content";
}

.header {
  grid: 1fr/1fr;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-area: content;
  height: 200px;
  overflow-y: scroll;
}

.content div {
  grid: auto-flow 1fr / repeat(auto-fill);
}




  
Name
  
Color
  
Description
  

    
Apple
    
Red
    
These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.

    
Apple
    
Red
    
These are red asd.
  

Here is an example using CSS GRID to have sticky headers only with CSS, no javascript required.