How do I freeze the first and last columns of an html table in a scrollable div?

Question

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.

Answer 1

Can I propose a somewhat unorthodox solution?

What would you think about placing the 'total' column after the 'name' column, rather than at the very end? Wouldn't this avoid the requirement for only a portion of the table to scroll?

It's not exactly what you're asking for, but perhaps it is a sufficient solution, given that the alternative would be pretty messy. (Placing the 'total' and 'name' columns outside of the table, for instance, would create alignment problems when not all rows are of equal height. You could correct this with javascript but then you'd be entering a whole new world of pain).

Also from a UI perspective, it may be that 'name' and 'total' are the most important data, in which case it would make sense to put them together, followed by a sort of 'breakdown' of the total. Of course, we seem to have an intuition that a 'total' should come after its constituent parts, but I don't think it would cause too much confusion to the user if the order were reversed like this (though this is a question for you, based on your product and your users).

Anyway, something to consider.

EDIT:

Here are some more unorthodox solutions, now that I think I understand your intentions a bit better:

1. Paginate the scores. Give the most recent ten, say, and the total, and a link to older scores, which are provided 10 at a time
2. Only give names, totals, and some other meaningful measures such as mean and sd, then provide a link for each name that shows all results corresponding to that name. You could then also provide a link showing all results for a given score set, so that comparisons between different users can be made. The point is that you'd only have to give 1 dimension of data for each view, rather than having an unwieldy 2D data set
3. Make the rows sortable (easy with jQuery UI) so that if I want to compare Mary to Jane, I can drag and place one after the other, so I wont need to keep scrolling left and right to see which scores correspond to which names
4. Highlight a row when it is clicked, by changing the background color or similar, again so I don't need to keep scrolling left and right.

Anyway you get the idea. Perhaps it is better to look for a UI solution than a contorted markup solution. Ultimately I would be questioning how important it is to present so much data to the user at once, that a portion of it needs to scroll in a particular fashion for the data to be readable. Perhaps you're building a spreadsheet app, and you really do need to display a 100x100 matrix in a single view. If not, you could surely come up with more creative ways than I have to split up the results.

Answer 2

Take a look at this jQuery plugin:

http://fixedheadertable.com/