Jquery html-CSS从页面最左侧显示表格的方式

我的要求是在表格中显示数据。数据是动态的，我从数据库中检索信息。 基于jsp页面中编写的循环，它显示其中的表和数据。第二行中显示的最后一个表应该从 最左侧区域，应在第一行显示的表格最大高度（即第二个表格高度）之后开始。 请建议，CSS将做哪些更改，以允许第二行中的表格从左开始，并应保留第一行中生成的最大高度表格的间隙。 请找到JSFIDLE：（如果JSFIDLE中的输出屏幕最大化，我们可以看到页面左侧没有显示的第二行表）

下面是示例html代码：

    <div align="center" style="padding: 10px; overflow-y: auto; border: 2px;">
      <div id="test" style="float: left; border: 0px solid #99ffff;">
       <table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 4px;">
        <tr>
        <td>
        <table cellpadding="0px" cellspacing="0px" style="margin-bottom: 5px;border-bottom:solid gray 2px; border-right:solid gray 2px;" width="350px" height="150px" border="1">

      <tr height="15px">
             <td  class="viewData" style="border-right:solid gray 1px;valign:middle;vertical-align: middle;" align="center">Column1</td>
             <td  class="viewData" style="border-right:solid gray 1px;valign:middle;vertical-align: middle;" align="center">Column2</td>
     </tr>

<tr align="center">
             <td class="viewData" style="border-right:solid gray 1px;vertical-align: middle;background-color: #EDEDED" align="center">
                    <span style="font-family:Tahoma;color:#AF4B65;font-size:10px;letter-spacing:1px;font-weight:bold;">
                   Row1A  </span> 
                     </td>
                     <td class="viewData" style="background-color: #D2DEEF;vertical-align: middle">
                    Row1B
                     </td>

<tr align="center">
             <td class="viewData" style="border-right:solid gray 1px;vertical-align: middle;background-color: #EDEDED" align="center">
                    <span style="font-family:Tahoma;color:#AF4B65;font-size:10px;letter-spacing:1px;font-weight:bold;">
                    Row2A </span> 
                     </td>
                     <td class="viewData" style="background-color: #D2DEEF;vertical-align: middle">
                    Row2B
                     </td>
</tr></table></td></tr></table></div>

专栏1
专栏2
第1A行
第1b行
第2A行
第2b行

---

谢谢。

我已经用类

替换了您的ID
test
。test

ID应该是唯一的。删除

浮动：left

，并将以下内容添加到CSS中

.test{
    display:inline-block;
    vertical-align: top;    
}

---

这里有一个

试着定义一个

最小高度

大于每个div的实际高度，还有一个

最大高度

，这样它就不会超过限制。这个帖子可能对你有所帮助：不客气！）如果你想要一个更华丽的位置变化和一个真正的堆叠的元素低于上述元素的高度，我建议你看看