Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20185

Re: Alignment of three tables

Show all headers | View raw

Denis McMahon wrote:

> On Sun, 09 Jun 2013 08:49:24 -0600, Mel Smith wrote:
>>     What is the best technique please ?
> 
> 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.
> 
> 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.
> 
> 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 );
  ^^^^^^^   ^^^^^^^^^
  [1] 
> tables = document.getElementsByTagName( "table" );
  ^^^^^^   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[3]
  [1]

> for ( i = 0; i < tables.length; i++ )
        ^[1]       ^^^^^^^^^^^^^  ^^^[5]
                   [3, 4]

> for ( j = 0; j < tables[i].rows.length; j++ )
        ^[1]       ^^^^^^^^^^^^^^^^^^^^^  ^^^[5]
                   [4]
> for ( k = 0; k < tables[i].rows[j].length; k++ )
        ^[2]       ^^^^^^^^^^^^^^^^^^^^^^^^  ^^^[5]
                   [4]

> tables[i].rows[j].cells[k].style.width = cwidths[k];
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^^[6]
  [4]

[1] Undeclared identifier (jslint: “implied global variable”)
[2] Use of error-prone Array constructor instead of safe Array initialiser
[3] Unchecked property access
[4] Inefficient, unnecessary repeated property access
[5] Inefficient increment
[6] Missing CSS unit of length, only effective in Quirks/Compatibility Mode.

See below for the considerably improved version.
 
> This may not be the best technique.

It is not.  It is not even the third-best technique.

> Pointy will probably decry it as being utter crap,

I have never used the c-word before and I will not start using it now.

> without actually offering any viable alternative,

Plain CSS provides several viable alternatives already:

  /* CSS1 */
  col.col1, th, td.col1 {
    width: 95px;
  }

  /* CSS2 */
  col:first-child, td:first-child {
    width: 95px;
  }

  /* CSS1 */
  col.col2, td.col2 {
    width: 150px;
  }

  /* CSS3 */
  col::nth-child(2), td::nth-child(2) {
    width: 150px;
  }

  /* … */

Or in ECMAScript/DOM, if the third-best technique must be used:

  var widths = [95, 150, 150, 10, 95, 150, 150];
  var tables = document.getElementsByTagName("table");
  for (var i   = 0,
           len = tables && tables.length;
       i < len;
       ++i)
  {
    for (var j     = 0,
             cells = tables[i].rows[0].cells,
             len2  = cells.length;
         j < len2;
         ++j)
    {
      cells[j].style.width = cwidths[k] + "px";
    }
  }

A table column is in general always as wide as the widest cell of the 
column.  Defining the CSS-width of the cells of other rows than the first 
row (of a table body), too, has *no* (positive) effect.

> because that's what pointy usually does.

You should probably see someone about your unjustified overconfidence, and 
about your fixation on the person you call “pointy”.
 
> 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.

Again your belief is not supported by fact, let alone a rational thinking 
and reasoning process.

It is neither necessary nor recommended to call the item(…) method on those 
_NodeLists_ (or the namedItem() method on HTMLCollections).  The bracket 
property accessor syntax suffices and is the best current practice.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Alignment of three tables "Mel Smith" <med_cutout_syntel@aol.com> - 2013-06-09 08:49 -0600
  Re: Alignment of three tables Scott Sauyet <scott.sauyet@gmail.com> - 2013-06-09 08:18 -0700
  Re: Alignment of three tables Denis McMahon <denismfmcmahon@gmail.com> - 2013-06-09 20:02 +0000
    Re: Alignment of three tables "Mel Smith" <med_cutout_syntel@aol.com> - 2013-06-09 15:01 -0600
      Re: Alignment of three tables Denis McMahon <denismfmcmahon@gmail.com> - 2013-06-09 22:50 +0000
    Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-10 00:46 +0200
      Re: Alignment of three tables John Harris <niam@jghnorth.org.uk.invalid> - 2013-06-10 14:41 +0100
        Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-10 17:35 +0200
      Re: Alignment of three tables "Mel Smith" <med_cutout_syntel@aol.com> - 2013-06-10 09:08 -0600
        Re: Alignment of three tables "Mel Smith" <med_cutout_syntel@aol.com> - 2013-06-10 11:16 -0600
          Re: Alignment of three tables Denis McMahon <denismfmcmahon@gmail.com> - 2013-06-11 02:05 +0000
            Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-11 05:09 +0200
              Re: Alignment of three tables "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-06-11 10:59 +0200
                Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-11 16:51 +0200
              Re: Alignment of three tables Stefan Weiss <krewecherl@gmail.com> - 2013-06-14 15:38 +0200
                Re: Alignment of three tables Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2013-06-14 20:26 +0200
                Re: Alignment of three tables Stefan Weiss <krewecherl@gmail.com> - 2013-06-14 21:22 +0200
                Re: Alignment of three tables Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2013-06-15 00:36 +0200
                Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-15 12:04 +0200
                Re: Alignment of three tables Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-15 11:41 +0200
                Re: Alignment of three tables Stefan Weiss <krewecherl@gmail.com> - 2013-06-15 13:53 +0200
                Re: Alignment of three tables Scott Sauyet <scott.sauyet@gmail.com> - 2013-06-17 04:28 -0700
  Re: Alignment of three tables "Andy" <andy@NOSPAMmanyplay.com> - 2013-06-10 09:19 +0100
  Re: Alignment of three tables Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-06-12 18:56 +0100

csiph-web