Re: How do I make my tbody scroll?

SOLUTION FOUND!

Hi everyone,

I solved my tbody scrolling problem. So many people e-mailed to find out if
I had, I wanted to let you all know what the solution was and thank all
those who sent advice. I really appreciate everyone's interest.

The secret to scrolling tbodies is the combination of the overflow: auto and
height: % styles applied to a division that frames the tbody. This solution
was provided by Christian Hujer at http://www.hujer.com/. Danke schon,
Christian. Cheers!

Now I should clarify one problem with this solution. I actually tried this
solution before Christian e-mailed me, but it wouldn't work for me. Even
after Christian's suggestion this solution did not work. That was because I
was trying to scroll my tbody within my table. You can't scroll tbody or any
part of a table IN A TABLE! (It took me two months to figure this out. Hey,
at least I'm persistent.)

There are two work arounds to this problem and it took me a while and some
reverse engineering of Christian's home page to figure out why my attempts
were not working. First, Christian' solution: You can create a second
height: % style for the entire table; this allows the tbody to scroll in the
table. Visit his site, http://www.hujer.com/, to see how this works. The
applicable styles are in id=pagecontainer and id=maincontainer in his
all.css file. I had layout problems with the pagecontainer (plus I don't
think it worked for me (?)), so I came up with a second, related work
around. I created two tables! The first had colgroup and thead in it; the
second, framed by the maincontainer division, had the same colgroup and
tbody in it. This worked. I can scroll my tbody and link to specific rows in
my tbody from external pages. The tbody will scroll when you link to one of
the rows and the row will appear just below thead. Perfect! This is exactly
what I was looking for.

You will have to tweak the height: % value in your tbody container
(Christian's maincontainer) in order to butt the tbody table seamlessly
against the thead table. I have five whole tables that I'm working with and
each table requires a unique height: % value. You will also have to add
vertical white space to an empty unbordered bottom row in tbody so that the
last row with data in it can scroll up to just below thead. Tweaking height:
% and this white space will create a seamless table which scrolls perfectly.

In addition, because you now have a scroll bar in tbody that you do not have
in thead, you need to create a last borderless empty cell in each row in
thead and tbody. The ones in tbody can have a width of 1 (maybe also 0); the
one(s) in thead can have a value that aligns your column borders on your
monitor so that the scroll bar and empty cell in tbody is compensated for by
the wider empty cell in thead.

There is still one problem left, but it is a minor nuisance only. When you
link to a row in tbody, both the tbody and the page will scroll down. You
will have to continuously scroll the page, not the tbody, up in order to
pull the thead back on screen. After what I've gone through to get this far,
this problem is tolerable. You may wish to find a way to fix the page scroll
bar in place except when you move it with your mouse or when a target
outside tbody is linked to. Me, I'm not complaining.

So that's that. Hopefully, someone else will benefit from either of these
solutions. Thank you, everyone, for all your interest and advice and
especially thank you, Christian, for your solution.

Cheers, everyone, and merry Christmas (or corresponding celebration).

Shawn Urban

PS: Christian suggested there may be a bug in Mozilla and MSIE which may
affect this scrolling tbody problem. I must say, yesterday, when I created
these tables on my computer, my Windows Explorer and Internet Explorer began
acting up. I'm not sure if this was caused by the overflow: auto; height: %
solution or by a problem which seems to be worsening on my computer for the
last couple of weeks (Norton Systemworks and the corresponding Windows tools
don't seem to recognize a problem exists; clearly one does!). Just a note
just in case.

----- Original Message Posted to www-html@w3.org -----
Sent: Wednesday, December 05, 2001 3:41 PM

> I've tried several methods to get my tbody to scroll, from
> frames to javascripts. The frames work, but I also want to
> tag each row in my table so external pages can link to
> them. The idea is to get the link to the correct row with the
> thead (and everything above it) still in sight. I also placed
> the table legend in the tbody so it can be seen with thead
> when I link to it from any entry in thead. I'm willing to
> abandon the scrolling tbody if anyone knows how to
> dynamically change the default URL in a frame so an
> external link can display everything correctly.

 ----- Original Message Posted to www-html@w3.org -----
Sent: Saturday, November 24, 2001 8:39 PM

> Hi,
>
> I'm stuck! Your HTML 4.01 specifications say TBODY can be
> scrolled between a fixed THEAD and TFOOT. Great! Just what
> I want to do. But where is the information that explains HOW to
> actually scroll TBODY?
>
> Thanks, Shawn
>
> shurban@telusplanet.net

Received on Wednesday, 19 December 2001 01:27:49 UTC