I am almost there but am not able to get one last thing.
The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen.
Prompt help is highly appreciated!
Please find the html file and the js file being used.
Thanks a bunch!
09-27-2011, 11:35 PM
Tried your solution in Firefox, Safari and Chrome. Does not work at all.
TypeError: Result of expression 'document.getElementById(sSheet)' [null] is not an object. Line 38.
Why don't you just use css and apply position:fixed to everything that should not scroll?
Any guidance as to what can I do to make it work?
I tried changing the z-axis but no result.
Any help please?? I am struggling to get it done !! :(
09-28-2011, 05:40 PM
I had a go at it: It's actually rather complex, since we want the "header columns" both left and top to only be "fixed" in one scroll direction, further more we want to snap the scroll to whole cells...
And of course I want my solution to be performance-effective and cross-browser compatible.
I came this far:
1) We should NOT scroll the actual table. We should scroll a "dummy div" as large as the table and then manipulate the table or table position from this.
2) Having the table inside a fixed div with overflow:hidden and then setting negative margins on the table might work, but for that we need separate "header" elements. They won't sync their width & height automatically since they are not part of the table. Also this seems to be sub-optimal performance in IE (I get flickering border lines...)
3) So a better solution would be to collapse/hide rows or cols depending on scroll position. Collapsing rows is fast. Collapsing columns is slow (if you do it by hidding them cell by cell...)