Any Way To Synchronize Table Column Widths With HTML + CSS?

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

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

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;