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

My requirement is to display data in the tables. And the data is dynamic which i'm retrieving information from the database. Based on the loop written in jsp page, it displays the tables and data in it. The last table displayed in the second row should start from the left most area and should start after the maximum height of the table displayed in the first row (i.e., second table height). Please suggest, what would be the CSS changes to allow the table in the second row start from left and it should leave the gap of the maximum height table generated in the first row. Please find the jsfiddle: http://jsfiddle.net/0w9yo8x6/89/ (If output screen in jsfiddle is maximized we can see the second row table not displayed at left in the page).

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

Below is the sample html code:

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

Thanks.

1 个解决方案

#1

I've replaced your ID test by a class .test ID's should be unique. Remove the float: left and add following to your CSS.

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

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

Here is a Fiddle

这是一个小提琴

#1