I have ported a spreadsheet to a web page, and need the top portion of the data to remain fixed.
I'm somewhat close to a solution (thanks to scouring around in these forums and Googling madly), but it's not *quite* there yet...
The page is essentially three separate tables; I need the first two to remain static and the third one to scroll.
A truncated version of the table is available at
http://www.comstocklab.com/9343-short.html What I've done to this point is assign a noScroll class to the rows of the two first tables; in the stylesheet, that class looks like this (essentially I stole this from another thread here, credit goes to the original author):
.noScroll {
position: relative;
top: expression(this.offsetPare
nt.scrollT
op);
height: 10px;
background: White;
}
(CSS essentially from original thread at
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21034218.html)
This *almost* works -- see
http://www.comstocklab.com/9343-short.html -- but not quite.
The main data table (which in the full-sized version is some 5,000 lines long -- I truncated the above table to 200) seems to be "sliding under" the header tables (as it should), but there are several problems:
First, there is a line of data that shows up *above* the static portion when you're scrolling through. Second, it seems very "jumpy", probably due to the JS having to re-write the static portion over and over? (I know Perl pretty well, but not JS :)). And thirdly, as one final annoyance, IE complains about Active Content when Windows security is on...
Is there a better way to do this? Can one just put the header tables in a static DIV with a different z-index or something?
BTW, cross-browser compatibility is *not* an issue with this particular project -- if it works in IE, we're good to go...
I was hoping to have this done in time for work on Monday (it's Sunday afternoon here on the US East Coast) -- any help greatly appreciated...
