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

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 1

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 give break down the widths like this:

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

Answer 2

To expand on Ken's answer, you can also specify the exact widths in pixels:

td { width: 250px }

or ems (width of the letter m):

td { width: 32em }

or ex or pt or whatever (well...actually %, pt, px, em, ex might be it). If you need your columns to be different widths, then the easy way is to give the table cells classes:

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

and assign column widths to the classes:

td.col1 { width: 48em }
td.col2 { width: 200px }
...

It should be sufficient to assign column widths to the first row in each table. [edit: looks like I've been scooped on that while I was writing]

You could probably also go crazy with the CSS 2 sibling selector, and write something like

tr > td:first-child { width:48em } /* first column */
tr > td:first-child + td { width: 200px } /* second column */
tr > td:first-child + td + td { width: 5% } /* third column  */
...

but if you have more than a few columns, that could get ugly. And if you're using some sort of template system or script to generate these tables, I'm sure it'll be easier/clearer to just put the class="col#" attribute on each cell in your template once.

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

Answer 4

I'm almost shocked that no one has suggested column groups! With it you can give a column a specific class, width, and other helpful properties. And since it's HTML 4.01 it's supported by all browsers that support the doctype.

Answer 5

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.

Answer 6

each pair of tables resize its coluns to the same width
similar to Ole J. Helgesen but with jquery and a parameter in order to select which tables equalize.
(I cant vote but is esentialy your solution)

<table ss="1" border="1">
  <tr><td>asdf<td>129292<td>text
</table>
<table ss="1" border=1>
  <tr><td>a<td>1<td>each column here has the same size than the table above
</table>
<table ss="2" border=1>
  <tr><td>asdf<td>129292<td>text
</table>
<table ss="2" border=1>
  <tr><td>each column here has the same size than the table above<td>a<td>1
</table>

and use this sctipt

$(function(){
  resizeTables('1');
  resizeTables('2');
});

//please set table html atribute ss="something" to propely call this js
// ss shorts for ShareSize
function resizeTables(sharedSize){
  var tableArr = $('table[ss='+sharedSize+']');
  var cellWidths = new Array();
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
       var cell = $(this)[0].rows[0].cells[j];
       if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth;
    }
  });
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
        $(this)[0].rows[0].cells[j].style.width = cellWidths[j]+'px';
    }
  });
}