Table column widths

veejar · 07-28-2006, 08:23 AM

Task - clone existent table without first head row.
Problem: column widths are not equal.

Code:

<html>
  <body>

  <div id='div1'>
    <table cellpadding='5' cellspacing='0' border='1' id='table1'>
      <tr>
        <td>#</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>text text text text text</td>
      </tr>
    </table>
  </div>

  <script type='text/javascript'><!--
    function test() {
      table1 = document.getElementById( 'table1' );
      table2 = table1.cloneNode( true );

      div = document.getElementById( 'div1' );
      div.appendChild( table2 );

      arr = [];
      row0_cells = table1.rows[0].cells;

      for ( i=0; i < row0_cells.length; i++ ) {
        arr.push( row0_cells[i].clientWidth );
      }

      table2.deleteRow( 0 );

      for ( i=0; i < arr.length; i++ ) {
        cell = table2.rows[0].cells[i];
        cell.style.width = arr[i]+'px';
      }
    }
  --></script>


  <br><br>
  <a href='#' onClick='test()'>Test</a>

  </body>
</html>

Kor · 07-28-2006, 12:44 PM

as long as you set a certain width for your cells:

Code:

arr.push( row0_cells[i].clientWidth );
......
cell.style.width = arr[i]+'px';

the cells will take those witdths, what else you could you expect? What's the use of seting them those width?

Why not simply clone the second row and append it to the table? What is the use to append the whole table?