限制tbody達到最大高度？

-1

我想強制max-height政策對一個表的tbody與overflow設置爲auto，以便滾動條只顯示時，表格變得太高。限制tbody達到最大高度？

有沒有辦法通過這種方式來限制table中的tbody元素的高度？

我感興趣的表格被動態地插入到包含在Bootstrap面板容器中的較大表格的單元格中。做下列類型的代碼不起作用：

html = ""; 
html += "<p>"; 
html += "<table class=\"sortable target_detail_sortable\" style=\"width:100%;\" id=\"my_div_table\">"; 
html += "<thead>"; 
// populate header cells 
html += "</thead>"; 
html += "<tbody style=\"max-height:300px; overflow:auto;\">"; 
// populate body cells 
html += "</tbody>"; 
html += "</table>"; 
html += "</p>"; 
$("#my_div").html(html);

任何有用的建議表示讚賞，謝謝！

來源

2014-11-15 Alex Reynolds

從RFC 1942 - HTML Tables第19頁，它在1996年向HTML中引入了表格：「如果表格正文中有大量的行，用戶代理可能會選擇爲表格主體部分使用滾動區域。」令人難以置信的是，沒有瀏覽器曾經實現過這種滾動區域，所以除了@ GodisGood的回答所描述的限制之外，沒有其他人不能這樣做。 – Alohci

我一定非常傷心！非常抱歉！ –

您無法在任何表格元素上設置固定或最大高度。 The height property is only treated as a minimum height.

您可以將display: block加到您的tbody。由於它不再是那種情況下的table-* display types之一，所以將使它變成高度。但是，由於tbody不再是table-row-group，因此您最終會再次隱含一個隱式表。因此，任何其他thead,tbody或tfoot元素中的任何列將不再與可滾動的tbody對齊。

除了列不匹配，儘管如此，這確實使它幾乎可以在除IE以外的所有最新瀏覽器中工作。你應該能夠自己解決剩下的問題。

但我不知道如何在IE中修復它。我確實遇到過"Pure CSS Scrollable Table with Fixed Header"，但這已經過時了，因爲他的兩個解決方案都在IE6中工作，但在IE7和IE8中（以不同的方式）破壞嚴重。他們做工作在IE的怪癖模式，但是，如果你迫切需要它，那可能是你唯一的選擇。

來源

2014-11-15 01:06:45

限制tbody達到最大高度？

回答

相關問題