我有一個固定高度和可變數量的tbody元素的表格。頂部堆棧tbody

table { 
    border:1px solid black; 
    height:300px; 
}

默認情況下，頁面增加了第一TBODY的高度，以填補表（演示：http://jsfiddle.net/hvdcz8qr/）的總高度。我如何將所有的tbody元素堆疊在表格的頂部，並將多餘的高度保留在tbody元素下面？

使用除table和tbody以外的元素在我的情況下不是一個選項。

[更新]我已經添加了一個第二列到我的例子：http://jsfiddle.net/hvdcz8qr/10/

來源

2014-10-19 Christophe

您可以添加100％高度td的另一個tbody。 Chrome devtools在資源標籤上使用它。 – Rudie 2014-10-19 17:45:42

@Rudie你能不能在我的演示中展示它？我已經嘗試過了，它不起作用：http://jsfiddle.net/hvdcz8qr/1/ – Christophe 2014-10-19 17:51:18

也許你不是這個意思[小提琴]（http://jsfiddle.net/AlexChariz/hvdcz8qr/2 /） – 2014-10-19 17:53:37

您可以設置的display的tbody到block

table tbody { 
    display: block 
}

編輯

中序，使TD使用全部空間：

table tbody tr { 
    display: flex; 
} 

td { 
    border:1px solid red; 
    display: block;  
    width: 100%; 
}

New JSFiddle

來源

2014-10-19 18:37:20 Tomzan

所以現在的問題是，tbody不會佔用整個表格寬度 – Christophe 2014-10-19 19:08:05

tbody IS佔據了所有空間，邊界是'td' – Tomzan 2014-10-19 21:28:17

thx爲更新的答案，不幸的是我處於一個較舊的環境中不支持顯示flex（這也解釋了爲什麼使用表格進行佈局）。 – Christophe 2014-10-21 03:58:09

後我建議您的評論試試這個：

table { 
 
    border: 1px solid black; 
 
    height: 300px; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
} 
 
tbody { 
 
    float: left; 
 
    clear: left; 
 
    width: 100%; 
 
    display: inherit; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>First tbody 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>second tbody 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>third tbody 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

設置width: 100%和display: inherit把整個表格的寬度。

來源

2014-10-19 19:39:57

這看起來很有希望，不幸的是，當我在每一行中添加多個td時，這些列不再對齊。 – Christophe 2014-10-21 04:02:45

頂部堆棧tbody

回答

編輯

相關問題