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

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

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

感谢。

来源

2015-02-09 user222

尝试定义'最小height'不是每个DIV实际高度较大，也是'MAX-height'所以它不超出限制。 – 2015-02-09 18:20:41

本文可能对您有所帮助：http://stackoverflow.com/questions/18274727/in-a-sequence-of-sibling-divs-can-you-set-the-height-to-the-highest值 – 2015-02-09 18:21:05

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

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

这里是一个Fiddle

来源

2015-02-09 18:23:33

ahhh .... vertical-align：顶投票 – 2015-02-09 18:25:31

谢谢@Ramis Wachtler，它唤醒:)。 – user222 2015-02-09 18:37:56

不客气！ ;）如果你想要一些更有趣的位置变化，并且在上述元素的高度以下实际堆叠元素，我建议你看一下[Isotope Plugin]（http://isotope.metafizzy.co /） – 2015-02-09 18:38:55

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

回答

相关问题