[Javascript] scrollable TABLE BODY while the HEADER is fixed

[Jacoby, Peter R.]

>>How can I provide a scrollable TABLE BODY while the HEADER and FOOTER is
fixed for IE???


I've been working on the same problem this week and was hoping someone else
had a good answer for both of us.  What I've done is a work-around, but not
quite bad enough to call it a cheat.

I really liked the way the code from the link you sent worked for NN, but
the problem is that, according to MSDN, IE does not support the overflow
property for tables.  It is valid for DIV, BODY, TEXTAREA, and a number of
other useful objects, but not TABLE, TD, TBODY or anything else having to do
with TABLES.  What I've ended up doing is putting anything that I want to be
scrollable (the TBODY part from the NN example) in a DIV with the overflow
property set to auto.  That left me with two separate tables on top of each
other, one for the TH cells and the other for the scrollable data.

That will solve the problem only if the columns are a specified width.
However, I needed to allow the table to determine the width of each column.
Since the header cells and data cells were in two different tables, they
were having no influence over each other.

What I found was IE's Dynamic Properties, and so after the page was loaded I
could take the width for each column in the first data row (I could choose
any, but the first seemed to be logical) and use the value to set the width
of the same column for the header row.  The relevant part of my code is:

function setWidth() {

for (var i=0; i < totalColumns; i++){
	
headerTable.getElementsByTagName("th").item(i).style.setExpression("width",
dataTable.getElementsByTagName("td").item(i).clientWidth - 2)
	}
}

It would be easier to do this if your cells have id's and then you can just
say:
ROW1COL1.style.setExpression("width", ROW2COL1.clientWidth)
and avoid using the DOM (for a couple reasons, I ended up doing it the
longer way).
I added the -2 to get rid of the cell padding.
I liked putting a button to call this function and then watch the header
columns change to be the correct size, and then when you are done you can
add it to the BODY onLoad command.
You can do the exact same thing for the footer, however I'm not sure how
this would work if you wanted to hold the left-most column and scroll
horizontally.

Check out
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html
/dude061198.asp
for a good explanation of the setExpression method in IE.

I can show you more of my code if you want, but I figured this reply was
long enough already.  If anyone has any other ways of doing this, I'd love
to learn more.  Thanks.

-Peter

> -----Original Message-----
> From:	Dan Costea [SMTP:costea at ssi-schaefer-noell.com]
> Sent:	Tuesday, February 05, 2002 3:18 PM
> To:	javascript at LaTech.edu
> Subject:	[Javascript] scrollable TABLE BODY while the HEADER is fixed
> 
> How can I provide a scrollable TABLE BODY while the HEADER and FOOTER is
> fixed for IE???
> 
> I know how to do this for NS6 (
> <http://www.faqts.com/knowledge_base/view.phtml/aid/7640/fid/192>), but it
> doesn't work for IE! 
> 
> Can anybody help me?
>