I went round and round this afternoon trying to find something to resize my table columns. It seemed like it should be easy but unfortunately it was not. All of the plug-ins I found seemed promising until I actually tried to implement them in my code. I finally realized that most of them worked...as long as my table was smaller than my viewport. I had tried to use the jQuery UI resizable function but to no avail. Finally, I figured out a way to do it.
The trick was to add a blank div within my <th> tag. Then upon resizing the column header, it would actually resize the div within.
Here's the code on Codepen.
Edit: I'm positive this code could be refactored to look/work better. This is just my first go at it.
