javascript - 将单独的 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()); 
        }    
    });
});​