Problems with dynamically aligning columns across multiple tablesusing JavaScript and DOM

Discussion in 'Javascript' started by Matthew Van Gundy, Nov 4, 2003.

  1. An example can be found at:

    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: 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
    Matthew Van Gundy, Nov 4, 2003
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SmVubmlmZXI=?=

    aligning datagrid columns

    =?Utf-8?B?SmVubmlmZXI=?=, Nov 22, 2004, in forum: ASP .Net
    Nov 22, 2004
  2. Carlos
    Aug 14, 2006
  3. Anthony Judd

    Aligning DataGrid Columns!!

    Anthony Judd, Oct 31, 2004, in forum: ASP .Net Datagrid Control
    Scott M.
    Nov 1, 2004
  4. Jennifer

    Aligning Particular Columns in a Data Grid

    Jennifer, Nov 18, 2004, in forum: ASP .Net Web Controls
    Nov 19, 2004
  5. Ravi Singh (UCSD)
    Richard Cornford
    May 26, 2005