Question

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

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

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%;
}

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

放置在单独div中对齐的并行表列

2 个答案: