How to set 100% table height in html

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s