Scrollable HTML table with top row and left column frozen

Question

Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of th

Answer 1

i have a version of this in use (for a Gantt-chart style display).

it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.

you need to work hard to get the cells to match sizes with the ones they match up to ( table layout-fixed can help achieve this).

The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.

You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...

As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.

hth