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

For CSS resizable columns you could use this trick. Abuse the webkit resizable textarea feature. Wrap header titles in readonly textareas and style as headings, just leave the resizing thumb. Use min-max-width to the same to disable vertical resizing. This is just Proof-of-work. Play with it.

  
 
    

    

    

    
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
    
    
    
 

Demo http://jsfiddle.net/rft8v4sp/1/