Geek Answers Handbook

Html fixed height table?

I have a table that dynamically displays records from a database. I just need to fix the height of the table so that the table gets a scroll window down inside the table itself if it has a large number of rows. Does this mean that the user does not need to scroll the entire page?

Is it possible??

Thanks in advance...

+7
html
source share
1 answer

One solution to this is to use the <div> layer surrounding the <table> , where you use the style attribute with: overflow: auto; max-height: (whatever height you want here) 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 will create a table that can grow in height, but it will be held back at the div level, and you will automatically get scrollbars when the content is more than 400 pixels.

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>
+13
source share

More articles:


All Articles