Matching table sizes

Posted on 2006-05-20
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
    LVL 17

    Expert Comment

    did you try just using width ? do you have any sample code so that i can help you more precisely...
    LVL 11

    Expert Comment

    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

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

    <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

    @ 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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    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…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now