从页面最左边显示表格的CSS方式

Question

我的要求是在表中显示数据。数据是动态的，我从数据库中检索信息。基于jsp页面中编写的循环，它显示其中的表和数据最左边的区域并且应该在第一行中显示的表格的最大高度（即第二表格高度）之后开始。请建议，CSS会有什么变化，以允许第二行的表从左开始，并且应该保留第一行生成的最大高度表的间隙。请找到jsfiddle：http://jsfiddle.net/0w9yo8x6/89/（如果jsfiddle中的输出屏幕最大化，我们可以看到页面左侧没有显示第二行表）。

下面是示例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>

谢谢。

Answer 1

我已经用类.test替换了您的ID test。ID应该是唯一的。删除float: left并将以下内容添加到您的CSS中。

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

这是一个Fiddle