Any way to synchronize table column widths with HTML + CSS?

Solution 1:

If you're not too picky about which column widths the browser comes up with, as long as they're the same across different tables, you can use the CSS table-layout property (supported by all major browsers) in combination with a table width:

table {
    table-layout: fixed;
    width: 100%;
}

This causes all columns (without a specified width) to have the same width, regardless of the table content.

Solution 2:

It's only possible if you can fix-width the columns. If you can set a fixed width then some css like this should work:

td {
    width: 25%;
}

You can customize each columns width like this:

<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>
...
<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>

and then specify the widths like this:

.col1 {
   width: 25%;
}
.col2 {
   width: 75%;
}

Solution 3:

Here's a small JavaScript I made to resize cells to make them equal width in all tables on a page.

function resizeTables()
{
    var tableArr = document.getElementsByTagName('table');
    var cellWidths = new Array();

    // get widest
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
           var cell = tableArr[i].rows[0].cells[j];

           if(!cellWidths[j] || cellWidths[j] < cell.clientWidth)
                cellWidths[j] = cell.clientWidth;
        }
    }

    // set all columns to the widest width found
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
            tableArr[i].rows[0].cells[j].style.width = cellWidths[j]+'px';
        }
    }
}

window.onload = resizeTables;