Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Problems with dynamically aligning columns across multiple tablesusing JavaScript and DOM

Reply
Thread Tools

Problems with dynamically aligning columns across multiple tablesusing JavaScript and DOM

 
 
Matthew Van Gundy
Guest
Posts: n/a
 
      11-04-2003
An example can be found at: http://www.shekinahstudios.com/test/dyntab.html

The problem in a nutshell:
Even though all of the cells in every column are set to the same width
as all other cells in that column and the tables are set to the same
width, in Internet Explorer 6.0, the columns don't line up. This can
almost be fixed if I change the <th> tags to <td>'s, however as soon as
I change the text formatting in one of the tables, the problem reappears
(and is further compounded when I put things like form elements in the
cells). Mozilla 1.4 displays it *almost* perfectly, except that the
columns at index 20 (the 21st columns) end up being off by one despite
setting them to the same size. Does anyone know why either of these
problems (particularly the first) might be occurring? Because of the
intended use of this code, I need to allow the user to put any valid
HTML constructs into the table and have it deal with them accordingly.

Further Information:
http://www.shekinahstudios.com/test/dyntab.html represents what I
consider to be a minimal test case of the problem. I am working on
creating library routines that will end up outputting data to multiple
HTML tables which must have their columns aligned. They must be in
separate tables because of other JavaScript behavior, which I have left
out of this test case for clarity. In the interest of not having to
require the user to pay attention to pixel level design details, I
attempt to calculate the correct column sizes at render-time via JavaScript.

The method is this. The window.onLoad event fires of a function that
first sets the width of all of the table cells in each column to the
width of the widest cell. It then sets the widths of the table to that
of the wider one (I did this to attempt to fix the alignment problem
that appears in IE). It then goes about checking to see that the width
of each pair of columns is the same (the 21st column fails this test in
Mozilla for some reason). It then ensures that all of the properties of
the two tables are the same, alerting the user of any differing
properties. Though virtually all of the properties are the same, things
still don't line up properly in IE, any ideas?

Many thanks,
Matthew Van Gundy
matthewvg At Yardi Dot Com

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Aligning gridview columns with a custom header Carlos ASP .Net 0 08-14-2006 07:53 PM
DOM javascript - Imbed javascript in dynamically added Row Ravi Singh (UCSD) Javascript 9 05-26-2005 01:24 AM
aligning datagrid columns =?Utf-8?B?SmVubmlmZXI=?= ASP .Net 1 11-22-2004 05:03 PM
Aligning Particular Columns in a Data Grid Jennifer ASP .Net Web Controls 4 11-19-2004 06:55 PM
Aligning DataGrid Columns!! Anthony Judd ASP .Net Datagrid Control 1 11-01-2004 02:43 AM



Advertisments