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 tab

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

Answer 2

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 3

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%;
}

Answer 4

each pair of tables resize its columns 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 it's essentially your solution)

<table data-ss="1" border="1">
  <tr><td>asdf<td>129292<td>text
</table>
<table data-ss="1" border=1>
  <tr><td>a<td>1<td>each column here has the same size than the table above
</table>
<table data-ss="2" border=1>
  <tr><td>asdf<td>129292<td>text
</table>
<table data-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 attribute `data-ss="something"` to properly call this js
// ss is short for SharedSize
function resizeTables(sharedSize){
  var tableArr = $('table[data-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';
    }
  });
}

Answer 5

You can sync the column widths by combining the tables (as suggested by @Stefanvds), but using a tbody + th for each:

table {
  border-collapse: collapse;
}

table thead,
table tbody {
  border-bottom: solid;
}

table tbody th {
  text-align: left;
}

<table>
  <thead>
    <tr> <th> ID <th> Measurement <th> Average <th> Maximum
  <tbody>
    <tr> <td> <th scope=rowgroup> Cats <td> <td>
    <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
    <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
  <tbody>
    <tr> <td> <th scope=rowgroup> English speakers <td> <td>
    <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
    <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>

Source: Example in the HTML spec itself

Answer 6

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.