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

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)

  
asdf
129292
text


  
a
1
each column here has the same size than the table above


  
asdf
129292
text


  
each column here has the same size than the table above
a
1

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';
    }
  });
}