I have a layout with two divs stacked on top of each other, each containing a table with the same number of columns. I need to ensure that the columns in both tables are the same width and aligned properly. If a column in one table expands, I want the corresponding column in the other table to expand to the same width.
Note: The columns currently do not have a set width. Here is a link to the HTML code for reference.
HTML:
<div id="A">
<table>
<tbody>
<tr>
<th></th>
<th>Blah! Blah</th>
<th>adsdsdadasdasdasdasd</th>
</tr>
</tbody>
</table>
</div>
<br/>
<div id="B">
<table>
<tr>
<th>left head</th>
<td class="col1"></td>
<td class="col2">Hello World!</td>
</tr>
<tr>
<th>left head</th>
<td class="col1">Hello World!</td>
<td class="col2">dsfsdfgdsgdsgdsfgdsgdsgfdfgdf</td>
</tr>
</table>
</div>
JQuery:
$(document).ready(function() {
$('#updatetopdiv').click(function(){
//Properly align parallel div's top to bottom
var tbl1 = $("#A table tr td");
var tbl2 = $("#B table tr td");
tbl1.each(function(i) {
if (tbl2.eq(i).width() < $(this).width()) {
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});
});