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?

Solution 1

Figured out something that works with tables, as I asked. What I said before about creating one fixed table and one scrollable table works with some modification:

I kept my original table with test names and data, and put it into a scrolling window. Then I created another table that only had the left column and placed it absolutely over the default position of the left column in the scrolling table. I then use jQuery to resize the single column cells to match the variable heights of the data cells (if the name cells are taller, the data cells still receive this data from the duplicated column).

I also keep an array of column widths. When I click on the left or right scroll button, I scroll the table over by the required array value, and increment/decrement the array index.

Not posting code because I don't want to rewrite and format an example, but if you have questions about how to do this, feel free to ask. =)

Solution 2

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.

Comments

[codecraftnap]

It's pretty easy to make fixed+sliding panels with divs... the problem is when working with tables. Margins and spacing work differently with rows, columns, and cells that are grouped together in one table.