Question

I have two div’s, one above the other and both have a table inside them with the same amount of columns. I want the columns to be the same width size in both and aligned. If a columns in on div expands, i want the column parallel in the other div to expand to the same with.

NB: The Columns have no width.
Link to the HTML code below:

---

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());
                }
            });
     });
});​

​

Answer 1

​$(document).ready(function(){
   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()); 
        }    
    });
});​

This works, though it doesn’t run until load.

Also placed here: http://jsfiddle.net/gwUFb/3/

EDIT:

I know you said you already got it working, but here’s my original code, edited for your use case:

$(document).ready(function(){
   var tbl1 = $("#A table tr th");
   var tbl2 = $("#B table tr td,#B table tr th");
    tbl1.each(function(i){
        if (tbl2.eq(i).width() < $(this).width()){            
           tbl2.eq(i).width($(this).width());
        } else {
           $(this).width(tbl2.eq(i).width()); 
        }    
    });
});​