html表固定高度?

时间:2010-09-15 11:06:31

标签: html

我有一个表格,可以动态显示来自DB的记录。我只需要修复表的高度,这样如果表有很多行,表就会在表本身内向下滚动窗口。这样用户不需要滚动整个页面?

这可能吗??

提前致谢...

1 个答案:

答案 0 :(得分:13)

对此的一个解决方案是使用<div>周围的<table> - 层,您可以在其中使用style-attribute: overflow: auto; max-height: (whatever height you want here)

举个例子:

<div id="mainHolder" style="overflow: auto; max-height: 400px;">
    <table>
    ... Lots of data ...
    </table>
</div>

这将创建一个可以在高度上增长的表,但它会在div层中受到限制,当内容增长到大于400px时,您将自动获得滚动条。

使用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>