html table fixed height?

Question

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?

Is this possible...?

Thanks in advance...

Answer 1

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>