HTML/jQuery Tables: Scroll horizontally, fix the first (left) column

Question

I have a table that displays a column of test names, with several (unlimited number) of columns of various test data associated with the tests. Since there will be several sets of data, I want to limit the number that can be seen, and have the user be able to scroll horizontally to show/hide the different sets of data.

The accepted answer to Jquery table column sliding effect has the sort of sliding effect that I'm looking for, but how do you fix the leftmost column of names? There is a lot of data so I don't want to clone two tables, as has been suggested elsewhere on the Internet.

Creating one fixed table for the names and one scrollable table for the data results came close, but the row height is variable on the amount of data received (there can be several rows of text within a cell), so the alignment gets thrown off.

Also, I don't want a default Internet scrollbar. I have left/right arrow images that I will be using to control scrolling, much like the example I posted above.

I've spent about 4 hours looking on StackOverflow and the rest of the Internet for answers, but I haven't found anything suitable yet... any help would be appreciated, thanks!

Edit: Absolute-positioning the left column results in the rest of the table shifting left underneath the left column (hiding the first column of data). Adding a "mirror" column with the same content as the first column works okay; the issue is that when the data columns have cells that are taller than the corresponding name cells, the absolute-positioned name cell can't see that fact and resize itself. Thoughts?

Answer 1

I managed to make the first column fixed, have the others slide under, and have the second column show: http://jsfiddle.net/Skooljester/trFPD/1/ I'll try working on the other parts of your question now.