Question: I have a number of tables with the same columns and it would look a lot nicer if they shared the same column widths. Is such a thing possible? Putting them in the same table with some rows with no borders between them isn't an option.

**Edit:** Yeah I'm aware I can fix the widths myself but I was hoping for something that would tie in to the browser's column width algorithm but simply tied two or more tables together for the purpose of doing that layout.

I didn't think such a thing was possible but I thought I'd check just in case.

Answer: 
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;

```
The easiest way is kind of a 'dirty' way, but it works the best.
It does exactly what's required:

Just merge your two tables into one table.
In my case the only thing between the two tables was an `h3`

So my table 

```
<table>
<tr></tr>
<table>

<h3>Title<h3>

<table>
<tr></tr>
<table>

```

became this:

```
<table>
<tr></tr>

<tr><td colspan="6">
<h3>Title<h3>
</td></tr>

<tr></tr>
<table>

```

this way your table will 'sync' it's size up.
of course this only works when there isn't too much complex stuff in between the two tables, but I'm guessing in most cases it isn't. if it was, the sync wouldn't be needed in the first place.