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: 
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`](http://www.w3.org/TR/CSS2/tables.html#propdef-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.
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;

```