Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!eu.feeder.erje.net!newsfeed.fsmpi.rwth-aachen.de!news-1.dfn.de!news.dfn.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: "Mel Smith" <med_cutout_syntel@aol.com>
Newsgroups: comp.lang.javascript
Subject: Re: Alignment of three tables
Date: Sun, 9 Jun 2013 15:01:39 -0600
Lines: 73
Message-ID: <b1k8pnF6s3gU1@mid.individual.net>
References: <b1jivmF20mgU1@mid.individual.net> <kp2n16$ror$1@dont-email.me>
X-Trace: individual.net 85ahqAQLF7vK9QwFEMeAWQLBtLt3PbYF9tVn55rNJDk462igTN
Cancel-Lock: sha1:ORq79jziBXNwBLVcpt+wZ31w2aQ=
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2900.5931
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.6157
X-RFC2646: Format=Flowed; Original
Xref: csiph.com comp.lang.javascript:20183

Denis said:
> The problem seems to be that your table and column widths may not match
> across the three tables. The following untested javascript attempts to
> set 3 tables each with 7 columns so that all columns in each table have
> the same width.
>

    I *try to make them match with <td width="nn%" >     in each of the 
vertical columns -- where nn is the same in a column for each of the three 
tables.

    My ''nn' values add up to 97% for eachch of the tables. The middle table 
may/may not have an overflow which brings the sliders into play. too


> Note that it even if it works on plain tables, it will break if any of
> the tables has, for example, a cell containing a rowspan or colspan
> attribute with a value other than 1.
>

    There are no colspans or row spans

> Consider a table with two similar sets of 3 columns either side of a
> spacer column, the 3 main column widths are 95, 150 and 150 px, the
> spacer column is 10 px, and the table width is 800 px:
>
> cwidths = new Array( 95, 150, 150, 10, 95, 150, 150 );
>
> tables = document.getElementsByTagName( "table" );
> for ( i = 0; i < tables.length; i++ )
> for ( j = 0; j < tables[i].rows.length; j++ )
> for ( k = 0; k < tables[i].rows[j].length; k++ )
> tables[i].rows[j].cells[k].style.width = cwidths[k];
>
> This may not be the best technique. Pointy will probably decry it as
> being utter crap, without actually offering any viable alternative,
> because that's what pointy usually does.
>
> Technically it's possible that you should refer to the elements in each
> collection of nodes using "collection.item(index)" instead of "collection
> [index]", so that then the three references:
>
> tables[i].rows.length
> tables[i].rows[j].length
> tables[i].rows[j].cells[k].style.width
>
> would become something like:
>
> tables.item(i).rows.length
> tables.item(i).rows.item(j).length
> tables.item(i).rows.item(j).cells.item(k).style.width
>
> etc etc, but in practice, I believe that both methods work equally well.
>
> It may be faster to simply process row 0 of each table, as long as
> nothing will have attempted to set the widths of any other cells:
>
> cwidths = new Array( 95, 150, 150, 10, 95, 150, 150 );
>
> tables = document.getElementsByTagName( "table" );
> for ( i = 0; i < tables.length; i++ )
> for ( k = 0; k < tables[i].rows[0].length; k++ )
> tables[i].rows[0].cells[k].style.width = cwidths[k];

Hi Denis:

    I'll review your js above and see what I can accomplish

Thank you !

-Mel