Search 
DailyCoding > Design

How to set 100% table height in html

Explains how to set 100% table height in a html page, a commonly faced problem.
Author admin on May 18, 2008 5 Comments
Rate it    (Rated 0 by 0 people)

This is very commonly faced problem by the html designer/developers. Table height doesn't expanding to 100% of the space even they set it in the style. See the example below

<table style="height: 100%;">
  <tr>
      <td>....</td>
  </tr>
</table>

When I see this in browser, its don't show up with 100% height of the space available.

What does 100% height means?

Setting the 100% height of the table means the table will occupy 100% of the available space vertically. Here available space means space of it's parent control. If the height of the parent control is not 100% then height of the table couldn't be 100%.

If you are trying to set 100% height of the table directly contained the body of a html page the you need to first set the height of the body and html. The below code will work perfectly fine for the 100% table height.

<html style="height: 100%;">
<body style="height: 100%;">
<table style="height: 100%;">
  <tr>
      <td>....</td>
  </tr>
</table>
</body>
</html>

If you are using css then

html, body
{
  height: 100%;
}

This will work in almost all browser

CSS | Html

Discussion

Perrin On May 23, 2008 02:04 AM
Try setting padding or margins on any of the elements and your in trouble...

Paulo Coutinho On May 23, 2008 04:42 AM
Very nice man, thanks.

Aj On May 26, 2008 03:46 AM
Thank you, you posted it at right moment. I was desperately looking for a simple way to do it. I looked at some javascript examples but they were horrible. Thank You once again.

Aj On May 26, 2008 03:47 AM
can this be achieved in div sites too.

Site Admin On May 26, 2008 05:31 AM
Hello Aj, Yes you can do this for div too. Just make sure that height of parent should be 100% or whatever you want.

Leave a Comment

Name
Email Address
Web Site
© Copyright 2008 Daily Coding • All rights reserved