I have a table which has a header row, but also a header column and a total column with several columns in between.
Something like this:
Name Score 1 Score 2 ... Total
--------------------------------------
John 5 6 86
Will 3 7 82
Nick 7 1 74
The entire table is defined inside a fixed-width scrollable div because there are likely to be a large number of Score rows and I have a fixed-width page layout.
<div id=tableWrapper style=overflow-x: auto; width: 500px;>
<table id=scoreTable>
...
</table>
</div>
What I would like is for the first (Name
) and last (Total
) columns to remain visible while the inner columns scroll.
Can anyone help me with this?
Edit: I mean horizontal scrolling only - changed to specify that.
Update: I've solved this problem for myself and have posted the answer below. Let me know if you need any more information - this was a bit of a pain to do and I'd hate for someone else to have to rewrite everything.