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 the fixed header I used position: sticky and for the scroll I used a container to mimic the tbody scrolling (actually, it is the tbody that scrolls) and avoid a block display on the table or its tbody that would make it somewhat dysfunctional.

The sticky position has more support than resize anyway so with the mandatory resize property it's relatively safe crossbrowser.

https://caniuse.com/#search=sticky

https://caniuse.com/#search=resize

I tried several times editing this post to make the posted code run here on SO, but to no avail, so I made you a public JsFiddle to play with: https://jsfiddle.net/Erik_J/xzhpdqLo/

(@Sølve Tornøe, I wasn't aware of your post before I submitted. Was away for a few hours and missed to refresh before posting. So you were the first to give a valid solution.)

div {
    position: relative;
    margin: auto;
    outline: 1px solid #000;
    outline-offset: -1px;
    max-width: 900px;
    max-height: 300px;
    overflow-y: scroll;
}
table{ 
    width: 100%;
    border-collapse: collapse;
}
thead th { 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    resize: horizontal;
    overflow: auto;
    background: #cff;
}
th, td {
    padding: 5px 10px;
    border: 1px solid #000;
}
th {
    text-transform: capitalize;
}


    

        

            
header 1
header 2
header 3
header 4
        
        

            
header 1
1
2
3
4
            
header 2 2222
1
2
3
4
            
header 3
1
2
3
4
            
header 4
1
2
3 3333333 3333333 3333333
4
            
header 5
1
2
3
4
            
header 6
1
2
3
4
            
header 7
1
2
3
4
            
header 8
1
2 2222 2222 2222
3
4
            
header 9
1
2
3
4
            
header 10
1
2
3
4
            
header 11
1
2
3
4
            
header 12
1
2
3
4
            
header 13
1
2
3
4
            
header 14
1
2
3
4
            
header 15
1
2
3
4
            
header 16
1
2
3
4