Table with sticky header and resizable columns without using JQuery

Question

All the solutions I\'ve seen to make a table with a sticky header and resizable columns seems to be using Jquery. I want a plain old solution using CSS only if possible. If CSS

Answer 1

The only thing you really need is position: sticky; on the header th. This combined with your resize: horizontal will fix your issue if I understand your question right.

table {
  display: block;
  background-color: cyan;
  height: 200px !important;
  overflow-y: scroll;
}

thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

th,
td {
  resize: horizontal;
  overflow: auto;
  min-width: 25px;
}

td {
  font-size: 1.45vmin;
}

tbody {
  height: 30px !important;
  background-color: green;
  width: 100%;
}

  

    

      

        
header1
        
header2
        
header3
        
header4
        
header5
      
    
    

      

        
1
        
2
        
3
        
4
        
5
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1
      
      

        
1
        
1
        
1
        
1
        
1