[Javascript] aligning table columns

Tim Makins spindrift at oceanfree.net
Wed Feb 11 06:43:05 CST 2004


http://www.geocities.com/clipower/ click on 'Table Control'

Tim in Ireland.
  ----- Original Message ----- 
  From: Paul Novitski 
  To: [JavaScript List] 
  Sent: Wednesday, February 11, 2004 9:51 AM
  Subject: [Javascript] aligning table columns


  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


------------------------------------------------------------------------------


  _______________________________________________
  Javascript mailing list
  Javascript at LaTech.edu
  https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20040211/bb223c2d/attachment.htm>


More information about the Javascript mailing list