Matching table sizes

I need to create a function that creates a table with the exact width of another table.  I can't hardcode in the widths, because the function is for multiple tables.  The problem is, I can't figure out how to get the exact width of a table in both FF and IE.  I try getting the width of the first table using offsetWidth or clientWidth.  This works in firefox, but in IE it doesn't.  The function-generated table is always much smaller.
Who is Participating?
  That will only work if you've got an embedded width attribute on the tables.  For example, try using CSS to set the width, and then alert document.getElementById("first").width - it'll come up blank.

  It should work - I used the offsetWidth/clientWidth of the cells (plus some adjustments for borders), and it seems to work.  See the script below, it sets the width of the first table to the width of the second table.  It was originally meant for a "header" table that matches up to the width of the "data" table, hence the names.  Regardless, hope that helps.


<script type="text/javascript">
window.onload = setTablesEqual;

function setTablesEqual()
  var cellsHeader = document.getElementById("header").rows[0].cells;
  var cellsData = document.getElementById("data").rows[0].cells;

  var widths = new Array();
  for (var i = 0, n = cellsData.length; i < n; i ++)
    widths[i] = document.all? cellsData[i].offsetWidth: cellsData[i].clientWidth;

  // adjust for borders
  // first clause if for IE, second is for Firefox
  if (cellsData[0].clientLeft)
    var borderEven = (cellsData[0].clientLeft % 2 == 0);
    for (var i = 0, n = cellsData.length-1; i < n; i ++)
      widths[i] -= cellsData[i].clientLeft + cellsData[i+1].clientLeft + (borderEven?2:1);
    widths[widths.length - 1] -=  2*cellsData[0].clientLeft - cellsData[1].clientLeft +

(borderEven?2: 3);
    var border = (parseInt(cellsData[0].offsetWidth) - parseInt(cellsData[0].clientWidth)) /

    for (var i = 0, n = cellsData.length; i < n; i ++)
      widths[i] += (border - 2);

  for (var i = 0, n = cellsHeader.length; i < n; i ++)
    cellsHeader[i].style.width = widths[i] + "px";
<style type="text/css">
table {
  border-collapse: collapse;

table td {
  border-width: 3px;
  border-style: solid;

#header td {
  border-color: red;

#data td {
  border-color: blue;

<table id="header">
    <td>Num 2</td>

<table id="data">
Cem TürkSenior Software EngineerCommented:
did you try just using width ? do you have any sample code so that i can help you more precisely...
Give your tables IDs, as in:

<table id="first" '... blah blah'>

<table id="second" '... blah blah'>

Then, in your <script>, you can:

document.getElementById('second').width = document.getElementById('first').width

This will set the width of the second table to the width of the first.  Remember to do this in a function called by onload.  If you just put this in the main script (either in the head or the body) it may well get executed before the tables are fully rendered, thereby setting things to the wrong size, or tossing an error.

You can do this even for specific rows and columns in a table as well.

Peace and joy.  mvan
@ dakyd,

Thanks for the feedback.  That detail is good to be aware of -- you never know what JavaScript property will come back blank until trying it (and in all browsers).  The hazards of an evolved/evolving 'standard,' I guess.  :-/

Peace and joy.  mvan
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.