HTML Table Scroll Locking

ddubbs
ddubbs used Ask the Experts™
on
I need to create an HTML table that will "lock" the header row while scrolling up and down and "lock" the first column when scrolling left and right (like freezing panes in Excel spreadsheets).  I have found an example that will lock rows (but not columns) using javascript.  However, we have users that use both IE and Netscape and I experienced some quirks between the 2 browsers using this solution.  So, my question is:  Is this functionality even possible?  If so, what is the best way to do it (preferable not javascript)?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

Commented:
Is it possibile?  Yes.  Without Script?  Depends on browser version and detailed requirements. Cross-browser?  Depends on version?  Is it worth 50 points?  Depends on how desperate an expert is for points.

Cd&
The easiest way to do this is to put your first column in a frame on the left and your first row in a frame at the top, and the rest of your table inside another frame between the two.  Then the main table will scroll as you wish.  This has limitations, but it's far easier than using a script to control it.

Author

Commented:
I have investigated the multiple frames option and it is still a possible solution.  I have even found a way to have the frames scroll simultaneously so the rows in the 2 frames stay in sync, which was a major issue.  However, as with javascript, there are issues with the different browsers.  For this option to work, the row height has to be the same in each frame.  I tried explicitly setting the row height in each frame, but Netscape doesn't like that and the rows get all out of wack.  I'm sure there's a way to keep the row heights in each frame the same, but I haven't found it yet.
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

Well It is not possible unless u try the frame solution. There's one thing u can do. U can make a floating bar equal to the width of the table and place it at the header position initialy. Then u might scroll but the floating bar will remain like header of the table. If u r interested about a floating bar script search in google. Hope u find easily cuz there r lot's of free scripts like that.

Commented:
I'm not positive, but it might be possible to position DIV elements on your page so that they don't scroll, and are "locked" in place like you've described, similar to the old "background-attachment: fixed" trick.  In fact, you may even be able to use that as a way of making this work out.
You could do something like this:

<TABLE WIDTH=300 CELLSPACING=0 BORDER=1 BORDERCOLOR=black CELLPADDING=0>
<TR><TD WIDTH="150">Test</TD><TD WIDTH="50%">Test</TD></TR>
<TR><TD COLSPAN=2 STYLE="padding:0px">
<DIV STYLE="width:100%;height:100px;overflow-y:scroll">
<TABLE WIDTH=100% CELLSPACING=0 BORDER=1 BORDERCOLOR=black CELLPADDING=0>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
<TR><TD WIDTH=145>Test</TD><TD>Test</TD></TR>
</TABLE>
</DIV>
</TD></TR>
</TABLE>

You need to play about with the cell widths to make sure the header line up with the data though.

Author

Commented:
TecnOtic,

I've tested this before, but unfortunately it doesn't work in my case because I have so many columns, which pushes the right margin of the table off the edge of the page so the horizontal scroll is not visible.  It also doesn't solve the problem of having the first column in the table visible at all times. Having the horizontal (and vertical for that matter) scroll bar and first column visible at all times is required in my case.

Thanks,
Dave

Author

Commented:
Thanks to all who have responded to this query!  I think I have come up with a workable solution using multiple frames and some javascript to keep the pages in the frames in sync while scrolling.  Still a few minor bugs to work out, but this meets my requirements.

Dave
Top Expert 2013

Commented:
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I may recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
Top Expert 2013

Commented:
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
zero point PAQ

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial