Table height:100%

Ever tried to get a <table> to take the whole browser height? Not a trivial task if you want to keep the browser in the Strict mode. Yes, removing

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

will do, but that’s already the Quirks mode.


This css rule will work even in the Strict mode:


html, body, table#main {height: 100%}


 

9 thoughts on “Table height:100%”

  1. Thats Awesome! I’ve been battling with this forever, and ultimately just threw up my hands and went back to DOCTYPE Transitional 4.0 to make it work. I prefer this much more!

    Any reason why this works? even though i dont have a table with an id of “main?”

    Thanks!

  2. I put a table inside the page, and it went a little more than the browser’s height. In my case, I fixed it removing the margins and reducing a little bit the height percentage:

    html,body,table#main
    {
    height : 98%;
    margin-left : 0;
    margin-top : 0;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>