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方式

回答

相關問題