My table always has width of 100%, but I do not know how many columns it is going to have. I need to make those columns resizable. When I do it with css resize property, it works, but I has some strange behaviour. When you try to resize some column, it jumps and it's like some imaginary margin is being added to th div you are currently resizing between resize selector and border, which I do not know how to prevent. Here is the fiddle
I have found some suggestions on how to fix this. If I add 1px width to every th element but last one, where I set width: auto it works as expected. But with this implementation table starts as very narrow, and I would like it to start as if I am not using word-break or white-space properties and leave it to user to resize it the way he wants later (that is why I need those two properties, if user wants to make it narrow, he should be able to do that). Fiddle with this fix
So, my question is regarding the first fiddle - I need my table to has width of 100%, but how can I prevent <thead> of adding that margin when you try to resize?