放置在独立div对齐内的并行表格列

Question

我有两个div，一个在另一个之上，两个都有一个表格，里面有相同数量的列。我希望这两列的宽度都相同，并且对齐。如果div上的列扩展，我想在另一个div中的列并行扩展为与之相同。

注意：列没有宽度。 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()); 
     }  
    }); 
});​ 

这可以工作，虽然它不会运行直到加载。

还摆放位置：http://jsfiddle.net/gwUFb/3/

编辑：

我知道你说你已经懂了工作，但这里是我的原代码，编辑为您的使用情况：

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