如何对齐表顶部，无论垂直或水平堆栈

Question

是否有可能，无论表高度，设置#mytable的宽度，使#mytable表50％，所以你有2个并排堆叠表BUT有他们都排队到顶部的底部，而不是交错，因为桌子是不同的高度？我不能改变的HTML，所以试图用CSS

<div id="mytable"> 
<table id="one"></table> 
<table id="two"></table> 
<table id="three"></table> 
<table id="four"></table> 
<table id="five"></table> 
<table id="six"></table> 
<table id="seven"></table> 
<table id="eight"></table> 
</div> 

的jsfiddle这里http://jsfiddle.net/BguL6/22/

在我的小提琴，你看到表下方的白色间隙，可以做到将它们全部对齐到顶部？我试图veritical对齐顶部，但没有去

Answer 1

是的，你可以用CSS做。

<div id="mytable"> 
     <div class="column"> 
      <table id="one"></table> 
      <table id="three"></table> 
      <table id="five"></table> 
      <table id="seven"></table> 
     </div> 

     <div class="column"> 

      <table id="two"></table> 

      <table id="four"></table> 

      <table id="six"></table> 

      <table id="eight"></table> 
     </div> 
    </div> 

和CSS：

#mytable table { 
     width: 100%; 
    } 

    .column { 
     width: 50%; 
     float: left; 
    } 

    #mytable #one { 

     height: 100px; 
     background: blue; 
    } 

    #mytable #two { 

     height: 150px; 
     background: yellow; 
    } 

    #mytable #three { 

     height: 130px; 
     background: green; 
    } 

    #mytable #four { 

     height: 110px; 
     background: orange; 
    } 

    #mytable #five { 

     height: 90px; 
     background: pink; 
    } 

    #mytable #six { 

     height: 140px; 
     background: purple; 
    } 

    #mytable #seven { 

     height: 50px; 
     background: blue; 
    } 

    #mytable #eight { 

     height: 70px; 
     background: white; 
    } 

的js小提琴：http://jsfiddle.net/uSPsG/

Answer 2

我设法用JavaScript使用查询做到这一点，它需要的表有绝对的位置，希望你会发现它有用：

var yTable = [ 0, 0 ]; 
$('#mytable').children('table').each(function (k, v) { 
    //calculate x of column + #mytable x 
    var x = k % 2 * $(v).width() + $(this).offset().left; 
    //calculate hight of column + #mytable y 
    var y = yTable[ k % 2 ]+ $(this).offset().top; 

    $(v).css({left: x, top: y}); 

    yTable[k % 2] += $(v).height(); 
}); 

的jsfiddle这里http://jsfiddle.net/BguL6/23/