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

Here is a solution using the CSS position: sticky attribute with resize: horizontal.

The resizable table headers will show a small icon in the lower-right hand corner, that you can grab and resize. (Due to a bug in Chrome, it may be so small you can barely see it...so look closely.)

  

    

        

        

        

        
header 1
header 2
header 3
header 4
header 5
        
        

        
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