Matching table sizes

Posted on 2006-05-20
Medium Priority
Last Modified: 2006-11-18
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.
Question by:chsalvia
  • 2
LVL 17

Expert Comment

by:Cem Türk
ID: 16726427
did you try just using width ? do you have any sample code so that i can help you more precisely...
LVL 11

Expert Comment

ID: 16726755
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
LVL 19

Accepted Solution

dakyd earned 1000 total points
ID: 16736079
  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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<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">
LVL 11

Expert Comment

ID: 16736950
@ 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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question