Scrollable tables

[harty83]

Is there a way to make this also lock the first column in addition to the header? That would be amazing!

[MikeFoster]

Hi harty83, Welcome to SPF!

Yes, but now I'm experimenting with something a little different. It is very much in the works but have a look.

[MikeFoster]

Hi harty83,

Regarding your question sent via email - fixed header doesn't reposition correctly when scrolling horizontally - I think I have that problem fixed now.

The demo for this thread

A related demo

Thanks for everyone's interest and feedback!

[Charles Belov]

Windows

Firefox 1.5.0.9: works perfectly.
Firefox 2: works perfectly.
IE6Windows: works perfectly.
IE7Windows: works perfectly.
Mozilla 1.7.13: collapses the header cells (but this is an out-of-date browser).
Opera 9.01: works perfectly.
Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
MSNTV Viewer 2.8: does no harm.

OS X Macintosh

Opera 9.01: works perfectly, if sluggishly.
Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
Firefox: works on letting up on the mouse button; acceptable.
iCab (narrow browser windows): cuts off part of last column.
iCab (wide browser windows): does no harm.

Safari 2: Is still getting the column widths wrong, although it gets the table width approximately right.

So for my implementation, I'd add sniffer code to exclude iCab, as I cannot allow any scripts that do harm.

Beautiful job, Mike!

[MikeFoster]

Hi Charles, thank you very much!

Great test results! Thanks for sharing that with us!

I tried to find some advice on detecting iCab. You probably already know these things, but here's a few tips I found:

quirksmode.org:

The version detect script searches for the browser name in both navigator.userAgent and navigator.appVersion. The reason is iCab: this browser's navigator.userAgent may not contain the string "iCab", but navigator.appVersion always does.

howtocreate.co.uk:

iCab can spoof, but always provides the ScriptEngine method that returns a string containing 'InScript'.

muchsoft.com:

isInScript = (window.ScriptEngine) ? (ScriptEngine().indexOf("InScript") != -1) : false;

A man with a pencil shows one of iCab's 'spoofed' UA strings.

[Charles Belov]

I was aware of the InScript identifier for iCab, but I'd rather learn of something I need twice than not at all. So, thanks.

Perhaps a better description of the Opera 9.01 small screen, which is meant to emulate cell phone results, would be:

does no harm, but may look a little silly; the additional layers show up at the bottom of the page; acceptable.

It would be wonderful if this feature would work on cell phones and PDA's, as their owners would have the most to gain from this feature. Certainly, I don't expect Opera to emulate all cell phones, so hopefully it works on some of them and does no harm on others.

[MikeFoster]

Originally Posted by Charles Belov

It would be wonderful if this feature would work on cell phones and PDA's, as their owners would have the most to gain from this feature.

You are right, Charles. Small-screen devices would be an excellent use of this object!

[bunsen]

Brilliant Charles. I have tried it on a page of my website (http://myweb.tiscali.co.uk/carbootsuk/anglesey.htm) and it works almost perfectly. I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.

[MikeFoster]

Excellent. Thanks, bunsen! I'll be adding that css to my demo

[Charles Belov]

Originally Posted by bunsen

I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.

Wow! Good catch!

I'd suggest using class instead of ID, so that each floating table header doesn't have to be listed individually in the style sheet. Although I guess it could be added dynamically using JavaScript.

[MikeFoster]

Hi Charles, how goes it?

#idFixedHeaderContainer should be enough. It contains all the copied headers.

[Charles Belov]

Ah, I missed that. Thanks.

Have been busy adding other features to our new website, so haven't really had time to work on this. I'm reluctant to add it until the Safari issue is solved; while it doesn't prevent use of the site, it looks woefully unprofessional.

Additional Mac result: Works in Camino (off by 1 pixel, but I'm not going to worry about that).

I've attached screen print excerpts demonstrating the Safari problem. It occurs in Safari 1 and 2.0.4 both.

By the way, there's something odd about the copy of my test results that you posted at your example page. None of the text wraps, so if a result is wider than the enclosing box, it gets cut off. Specifically, "Opera 9.01 small screen mode: does no significant harm; the additional layers show up" and "Safari 2: Is still getting the column widths wrong, although it gets the table width appro" although I can copy and paste the full text. I'm using Firefox 1.5.0.9 at 800 x 600, with a minimum font size of 14 pixels Verdana.

[MikeFoster]

Originally Posted by Charles Belov

By the way, there's something odd about the copy of my test results that you posted at your example page. None of the text wraps,

It's in a PRE element which has overflow:hidden. I usually only use those for displaying code so I never want them to wrap.

Haven't had a chance to look at your screen-print but will soon.

thanks

[Charles Belov]

Originally Posted by bunsen

Brilliant Charles. I have tried it on a page of my website (http://myweb.tiscali.co.uk/carbootsuk/anglesey.htm) and it works almost perfectly. I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.

Thanks for adding to the knowledge set. Actually, Mike Foster is the genius who implemented it. I originated the idea/specs and have been doing the cross-platform testing. (I acknowledge that coming up with the idea requires some genius; it's just that it's usability genius and not coding genius.)

Originally Posted by MikeFoster

It's in a PRE element which has overflow:hidden. I usually only use those for displaying code so I never want them to wrap.

May I respectfully suggest overflow:auto

[MikeFoster]

Yes, you're absolutely correct. I should have been using overflow:auto

[Charles Belov]

By the way, I just noticed your JavaScript Guru of the Year 2006 icon. Congratulations! After seeing your work on this project, I can certainly believe it.

[MikeFoster]

Thanks

[geosite]

On Edit: Deleted; problem solved!

[MBKlaus]

This solution worked well. My client, however, did not want to have any ".js" files loaded onto their server. Go figure.

I came up with an alternative that seems to work well (see link below). I created 2 tables that line up on top of each other. One is the "floating header" and the other is the body. The "body" table is enclosed with a <div> set to make the table scroll.

I used Javascript from the referring page to control the size of the target page with the tables so that 1) the only scroll bars are in the table and 2) the two tables always line up so that they appear to be one.

Here is an example: http://www.iolite.net/scrolldemo.htm

Follow the link to see the table. The scrollbars scroll the "body" table while the "floating header" table stays put.

[Charles Belov]

Actually, there are quite a few CSS-only solutions out there if one is willing to have fixed-width tables and have a separate scroll bar for the table. At least one of these is linked to elsewhere in this thread. Your solution does fit that relatively well. I say "relatively" as there are differences in browsers, such as whether the browser will respect the column widths you set; the columns are a slight mismatch in my browser.

The specific solution I am trying to find is:

1) Works with liquid tables.
2) Doesn't require a separate scroll bar for the table.

It does require JavaScript, which will not meet your needs, but it does meet mine (and thus is the topic of this thread). And right now Mike Foster's code--which I find impressive--either works nicely or fails nicely in every browser but Safari (works sloppily) and iCab (fails sloppily). The iCab failure can be solved by sniffing iCab so we can exclude the JavaScript from it (fail nicely). So we are only looking for a way to make Safari behave better (work nicely).

Hope that makes it clear.

[MikeFoster]

Hi MBKlaus, Welcome to SPF!

[MBKlaus]

Oops, my mistake. Sorry about being off topic.

[Deep13]

Hi,
Thanks for the such a nice piece of code. I am facing one issue with it though. Your code makes first TH as blank and also adds up extra TH or space in the end of thead. but I do not want like that. How do it fix it up?

I hope you got my point.

Thanks
Deep

[MikeFoster]

Hi Deep13,

Your code makes first TH as blank and also adds up extra TH or space in the end of thead.

I'm sorry but I don't follow you. Give us a link to your test page.

[Deep13]

Here we go:


The fist column in TH (blue BG) should be a checkbox but current code hides it for some reason. I have used my best skills in MS Paint to explain the stuff haha