javascript - 将位于单独 div 内的平行表列对齐

Question

我有两个 div，一个在另一个之上，并且它们里面都有一个表，列数相同。我希望两列的宽度大小相同并对齐。如果 div 中的列扩展，我希望另一个 div 中的列平行扩展为相同。

注意：列没有宽度。 链接到下面的 HTML 代码：

---

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> 

---

查询：

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

​</p>

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

Answer 2

html 将是：

<div id="A">
   <table class="fixed-table">
       <tr>
          <td class="column-a">Hello World!</td>
          <td class="column-b"></td>
       </tr>
   </table>
</div>
<br/>
<div id="B">
   <table class="fixed-table">
       <tr>
          <td class="column-a"></td>
          <td class="column-b">Hello World!</td>
       </tr>
   </table>
</div>

CSS将是

.fixed-table {
   table-layout: fixed;
}

.column-a {
    width: 50%;
}

.column-b {
   width: 50%;
}

这是一个固定的解决方案，不是动态的，如果出现任何 div 滚动，对齐中断。为此，您必须使用 javascript。