html table fixed height?

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 o开发者_JS百科f rows. This is so the user wont need to scroll the entire page?

Is this possible...?

Thanks in advance...

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)

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.

With jQuery you can also do something like this:

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