HTML spreadsheet with frozen left column, scroll-able vertically?

Question

I've seen examples here and there of a trick to use

position:absolute

on the first column of a table, and then make the rest of the table scrollable horizontally.

This works, as seen here: http://jsfiddle.net/YMvk9/4289/

However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.

I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?

Answer 1

Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.

Here is the FIDDLE

You had several problems:

1. Your overflow property was only applying to the second column of the table.
2. Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
3. Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
4. Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.

Hope that helps!

UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.