I am trying to make a table with a scrollable <tbody> and a fixed <thead>.
I have attempted to do so here https://jsfiddle.net/ghnfzwm6/11/. However, as you can see the <thead> is not lined up with the <tbody>. Also, the scroll wheel is all the way to the right whereas I would like it right next to the table.
Does anyone know how I can fix this without setting fixed widths for the columns?
EDIT: Additionally, top: 0; moves the <thead> to the top of my page which is ok on the fiddle but not normally. However, without it there is a small gap...
EDIT2: I have found this solution https://jsfiddle.net/uo5v0cfw/11/. However, the problem gere is that the furthest right column is cut off by the scroll bar. This can be fixed by changing the overflow-x to auto, but I don't want to have to scroll horizontally...