[Javascript] aligning table columns

[Paul Novitski]

Friends,

By groping in the dark, I've been partially successful at setting the 
column widths of two tables equal to one another.  My goal is to have the 
data rows in a scrolling div (overflow: auto;) beneath stationary column heads.

Apparently I don't yet understand the differences between the various 
object widths --  obj.offsetWidth, obj.style.width, and 
obj.style.pixelWidth -- because what should have been a simple routine jest 
ain't.

See the attached demo (for IE, not Netscape).  For each of my nine columns, 
I compare the offsetWidth of the colummn head and the data cell, and set 
the style.pixelWidth of both columns to the greater width.

However, these two kinds of width are apparently different, as can be seen 
when the alignment routine is run a second time -- the column widths grow, 
therefore a table cell's offsetWidth must be greater than its 
style.pixelWidth.  The difference seems to be 9 pixels, which might? have 
something to do with the 10 pixels of right + left stylesheet padding in 
each of the cells.

A second problem is that the alignment routine fails if I define the width 
of either table.  I want the data row table to fill the width of its 
containing div, but haven't found a way to set it's width without 
discombobulating the alignment routine.

My Javascript and DHTML references simply define pixelWidth and offsetWidth 
as being "the width" of an object and don't detail their differences.

Can anyone help illuminate this dark corner for me?

Thanks!

Paul 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20040211/12a2d35c/attachment.html>