Html html表格固定高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3717001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html table fixed height?
提问by soorajthomas
I have a table which shows records from DB dynamically. I just need to fix the height of the table, so that the table gets a scrolling window downwards within the table itself if it has large number of rows. This is so the user wont need to scroll the entire page?
我有一个表，它动态显示来自 DB 的记录。我只需要固定表格的高度，以便表格在表格本身内向下滚动窗口（如果它有大量行）。这样用户就不需要滚动整个页面？
Is this possible...?
这可能吗...？
Thanks in advance...
提前致谢...
回答by NoLifeKing
One solution to this would be to use a <div>-layer surrounding the <table>, where you use the style-attribute with:
overflow: auto; max-height: (whatever height you want here)
对此的一种解决方案是在<div>周围使用-layer <table>，您可以在其中使用 style-attribute：
overflow: auto; max-height: (whatever height you want here)
As an example:
举个例子：
<div id="mainHolder" style="overflow: auto; max-height: 400px;">
<table>
... Lots of data ...
</table>
</div>
This would create a table that can grow in height, but it would be restrained in the div-layer, and you would automatically get scrollbars when the content grows larger than 400px.
这将创建一个可以增加高度的表格，但它会被限制在 div-layer 中，并且当内容增长大于 400px 时，您将自动获得滚动条。
With jQuery you can also do something like this:
使用 jQuery，您还可以执行以下操作：
<script type="text/javascript">
window.onresize = doResize;
function doResize() {
var h = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight) - 20;
$('#mainHolder').css('max-height', h);
$('#mainHolder').css('height', h);
};
$(document).ready(function () { doResize(); });
</script>
