I stumbled upon this quite by accident: all you need do is put the content you want scrolled inside a
tbody tag, with
style='height:nn;overflow-y:auto' where
nn is the height you want your content. The
tr containing your headers goes
outside this
tbody. This has been obvious all along to people who understand CSS, but I'm only starting to get to grips with this stuff.
Here's an example, hit view source to see how it works:
| foo | bar |
|---|
| 0 | x |
| 1 | y |
| 2 | z |
| 3 | x |
| 4 | y |
| 5 | z |
| 6 | x |
| 7 | y |
| 8 | z |
| 9 | x |
Beats a zillion lines of js and css to do the same thing, no?
It works for Firefox 3, I haven't tested it elsewhere. If anybody out there still has IE, please let me know if it works!
Update : if you want the whole table to scroll horizontally, too keeping the headers aligned with their columns (thanks, Olivier), put the it in a div with
style='width:nn;overflow-x:auto'. Thus:
| foo | bar | baz |
|---|
| 000.00 | xxx | toto-titi |
| 100.00 | yyy | titi-didi |
| 200.00 | zzz | didi-dodo |
| 300.00 | xxx | dodo-toto |
| 400.00 | yyy | toto-titi |
| 500.00 | zzz | titi-didi |
| 600.00 | xxx | didi-dodo |
| 700.00 | yyy | dodo-toto |
| 800.00 | zzz | toto-titi |
| 900.00 | xxx | titi-didi |
It's not so pretty - the vertical scrollbar is visible only if you've scrolled horizontally all the way to the right. But given that you can scroll with the keyboard or mouse wheel, perhaps that's not such a terrible thing ...
OK! But the issue we had was when there is also a horizontal scrollbar. The header was then not scrolling at all.
ReplyDeleteYes I know, the user aint' gonna need it but you know "them"... they really wanted it :-(
@Olivier - see update (the comment box doesn't let me include table tags)
ReplyDeleteInteresting, the vertical scroll does not work with Safari, but the horizontal one does.
ReplyDelete@laurent ... ouch, you're right! who is being non-compliant in this case?
ReplyDelete