Two HTML Tables with same column widths.

[sandeep Kumar]

Hello Friends,

Could any one please help me in this issue.

I have two HTML Tables table1 and table2. Two tables have same columns. How could I make the widths of each column in both the tables synchronized? Even if one of the columns width changes in table1, that should be reflected in table2.

If there are any code snippets, would be more helpful.

Thanks in Advance.

Regards,
Sandeep.

[Shawn Montague]

Are you planning on having the synchronization fire during an event of some sort?

Anyway, something like this might work:

<table id="myTable1">
<tr>
<td id="myColumn1_1"></td>
<td id="myColumn1_2"></td>
</tr>
</table>
<table id="myTable2">
<tr>
<td id="myColumn2_1"></td>
<td id="myColumn2_2"></td>
</tr>
</table>
 
<script language="javascript">
<!-- fires on button click, page load, mouse over, etc, etc -->
function foo()
{
     document.getElementById('myColumn2_1').style.width = document.getElementById('myColumn1_1').style.width;
     document.getElementById('myColumn2_2').style.width = document.getElementById('myColumn1_2').style.width;
}
</script>

This assumes that you have enough room to size how you see fit.

[sandeep Kumar]

Hi Shawn Montague,

I have already tried with this. But found no luck.

Is there any other approach for i? If any one has got some information, please help me.

Thanks in Advance.

Regards,
Sandeep.