Welcome to Manicprogrammer Sign in | Join | Help

Table Height of 100%?

Want to have a table with 100% height and not sure how to do it?

JQuery comes to the rescue!!!

Just do it like this:

<html>
<head>
    <script type="text/javascript" src="yourScriptPath/jquery-1.2.6.min.js"></script>
    <script>
        $(function(){
            function refreshTableHeight(){
                var windowHeight = $(window).height();
                $('#mainTable').height(windowHeight);
            }
        
            refreshTableHeight();
            
            $(window).resize(function(){
              refreshTableHeight();
            });
        });
    </script>
</head>
<body>
    <table border="0" cellspacing="0" cellpadding="0" width="100%" id="mainTable">
        <tr>
            <td>Some text</td>
        </tr>
    </table>
</body>
</html>

And JQuery will keep the table 100% even if the window is resized.

This only works in the latest version of JQuery (1.2.6) or if you use the Dimensions plug-in for other versions.

Cheers,

#157

Published Saturday, June 07, 2008 10:00 AM by heynemann
Filed under ,

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# re: Table Height of 100%?

Saturday, June 21, 2008 9:16 AM by Srihari

Thats great. Tough problem made easy :)

Your efforts for the community are great.

Srihari

# re: Table Height of 100%?

Saturday, June 21, 2008 11:10 AM by heynemann

Thank you very much Srihari!

Cheers,

Bernardo


Enter the text you see in the image:

Leave a Comment

(required) 
required 
(required)