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 45 Comments
Rate it    (Rated 3 by 83 people)
42,909 Views

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:46 AM
can this be achieved in div sites too.

Daily Coder 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.

suresh On Aug 7, 2008 06:11 AM
thanks a lot

Vidbird On Aug 23, 2008 08:37 PM
I have the same issue with 100% DIV Height bug in FireFox. I want to keep a movie clip in <div> with width:100%; height:100%;. It works pretty in IE6 & 7 but Ohh! not in FireFox. Any Suggestions Please.

Daily Coder On Aug 23, 2008 08:37 PM
@Vidbird, did you tried the solution mentioned in this article? Set parent container and body height = 100% should solve the problem.

Cnr On Sep 19, 2008 01:50 AM
Thank you, it really works!

Kamlesh On Sep 20, 2008 04:08 AM
I have a question that, 100% height is relative that is true but then why width is not relative?

Daily Coder On Sep 20, 2008 07:55 AM
@Kamlesh, like height width is also relative to parent control.

Kamlesh On Sep 22, 2008 03:04 AM
What is the reason 100%width works but 100%height isn't work.
means if i write 100% Width it will cover whole screen width but in the case of height it's not true.

why we need not to write

<html style="Width: 100%;">
<body style="Width: 100%;">
<table style="Width: 100%;">
But just
<table style="Width: 100%;">
works?

Daily Coder On Sep 24, 2008 01:38 AM
I am not sure what could be the actual reason for this but this might be because generally web pages grows vertically and not horizontally. :)

kamlesh On Sep 24, 2008 03:04 AM
Though 100% height isn't work in .net it works in HTML.

I have checked this in HTML it works.

You can check this. please paste following code in notepad
and save it as test.html you can see 100% height and 100% width works
but the same code isn't work in .net

<html>

<head id="Head1" runat="server">
<title>Test Kamelsh</title>
</head>

<body>
<form id="form2" runat="server">
<div>
<table border="1" height=100% width=100% >
<tr>
<td align="center" valign="middle"> <input type="button" name="test" value="test" ;" />
</td>
</tr>
</table>
</div>
</form>
</body>

</html>

vshard On Oct 2, 2008 07:15 AM
I believe the reason 100% width works more often than 100% is that by default block level elements have 100% width and auto height so your parent element is basically already set for you width-wise, but not height-wise. The reason it defaults that way is a bit of an unknown, but my best guess would be that one would more likely want an item to fill the page width-wise (consider a text block) and edit down from there as needed than one would want height to do the same thing. Consider the massive page length if all block elements came with 100% height.

By the by... the above fix doesn't always work depending on your configuration. I can think of at least one xhtml example where a table inside a div would not expand to full height in firefox even though the body, html, table, and div elements were set to 100%. More searching and learning to be done, I suppose.

Vshard On Oct 2, 2008 07:21 AM
Ammendment to the above - when setting parent element to 100% fails, you're missing the setting of an element somewhere in the nest of things - when in doubt, set all the wrapping elements.

Compuer_guru On Oct 19, 2008 08:38 PM
Just a note for IE6. The information on this page is incorrect for nested tables if you are following W3C XHTML 1.0 / HTML 4.01 standards. It works on the first table tag, but if you use a second table, even though all parent tables are at 100%, it won't work.

Example (The second table will not have a height of 100% when rendered) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%;">
<head><title>test</title></head>
<body style="height: 100%;">
<table style="height: 100%;" border="1">
<tr>
<td>
<table border="1" style="height:100%; ">
<tr>
<td>
centered stuff here
</td>
</tr>

</table>
</td>
</tr>
</table>
</body>
</html>

Sean On Nov 20, 2008 11:41 AM
Hey there

Thanks in advance with the code which you supplied. It works and i feel very happy after i sort out my table problems in myspace.

Again Thanks

peanut On Nov 24, 2008 06:47 PM
tjrj

Omega On Dec 16, 2008 02:16 PM
@Kamlesh - Quote: Though 100% height isn't work in .net it works in HTML.

It should work with .NET with no problem. Looking briefly at your code, if you have set 100% height on html, body and form tags, it would work just fine. Personally, from my experience, the 'form' tag is where .NET developers normally forget to add 100% height.

Ricky J On Jan 20, 2009 04:21 AM
Hi, i have been working on these issues this week and have come across basically the same issues and solutions as above. The reason the code sometimes doesnt work in .net is to do with the default doctype tag at the top of .net pages. The code will work without this tag but i believe this may cause other browser issues.

I am a wee bit (meaning completely) stuck on a related issue of trying to add copyright text at the bottom of my 100% table. The problem is that depending on how far the pages content spans down the page, the bottom cell will change sizes to fill space which moves my copyright text very slightly. I have tried putting a cell between the content and bottom with 99% height to fill the space but this removes my div background. Any ideas of how to do this?

Thanks

Ricky

Marcus On Feb 27, 2009 03:20 PM
Thanks Omega, One happier .net developer here. Adding Height to the form tag made all my tables suddenly work in the newer browsers. Cheer!!!

Al On Mar 25, 2009 10:25 PM
Hi and thanks. I've been converting my pages to HTML 4.01 Transitional and the height="100%" for tables stopped working.

I found that by adding
html, body
{
height: 100%;
}
to my site's CSS file the tables all worked again. I didn't have to change the height="100%" to style="height: 100%;" in the individual tables.

Arti On Apr 11, 2009 02:48 AM
Style type is working in all browsers.

Serbülent On Apr 12, 2009 05:30 AM
Hi There;
I have same problem when I desing a table with 3 row and column and 100% hight. And I solved the problem by manipulating the standart html code.

When create a web page the standart codes includes by the program which you use. These are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR....tional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

something like that.

<html xmlns="http://www.w3.org/1999/xhtml">: if you change to only <html>
and add a hight attribute to the table tag, then you can use 100% table height.

Amit Gupta On Apr 24, 2009 03:27 AM
It works well in IE only, doesn't support in Firefox or Safari. Any idea?

Lisa Formby On Apr 28, 2009 03:41 AM
If I want the table to be right at the very top of the page - any suggestions on what I can do here? (And thanks for the tip too... it's great). I just need my table to start at the very top of the page.

Regards, Lisa

Lou Neal On Apr 28, 2009 03:42 AM
If I want the table to be right at the very top of the page - any suggestions on what I can do here? (And thanks for the tip too... it's great). I just need my table to start at the very top of the page.

Regards, Lou

Dan On May 9, 2009 07:11 PM
Thanks, worked great ;-)

Dan On May 9, 2009 07:16 PM
Amit Gupta - "It works well in IE only, doesn't support in Firefox or Safari. Any idea?"

It does work on Safari, IE and Firefox, check that you done it right. Just worked for me fine.

Lisa and Lou, you probaly need to add this to your css:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

If you don't have it, then the default is something like 10px

Hope that helps,

Daniel Murray

Dan On May 9, 2009 07:16 PM
Amit Gupta - "It works well in IE only, doesn't support in Firefox or Safari. Any idea?"

It does work on Safari, IE and Firefox, check that you done it right. Just worked for me fine.

Lisa and Lou, you probaly need to add this to your css:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

If you don't have it, then the default is something like 10px

Hope that helps,

Daniel Murray

Sarika Katake On Jun 9, 2009 12:01 PM
Thanks a lot, was stuck for long time for the same. Learning HTML.

how to play the game of craps On Jun 18, 2009 12:50 AM
That's an elegant solution true enough, thanks you for that (I got the intend, but I had trouble getting it to work right). But I've learned from experience that with the more 'customized' layouts a customer demands, you cannot do without specifying specific sizes. If you do need to set sizes, as you said, I agree you should try to use ems where possible.If you example though, won't you get problems when using lower resolutions, meaning the main content won't get enough space and the footer will get in the way (not sticking to the bottom anymore either)? From a quick glance, you'd still need to define a height for the middle content, just to get the scroll bars in just such a case...

JaH On Jun 18, 2009 06:16 PM
Thanks for the quick fix. Works great!

ehsan On Jul 23, 2009 12:04 AM
hi
i want to have table with 100% height of browser
this table have 3 rows
header row with 50px
middle row free size
footer row 50px

but browser shows it unnormally!

can anyone help me?

Akash On Aug 2, 2009 02:47 AM
hi
i want to have All table with 100% height of all browser
this style working only my 2 table
html, body
{
height: 100%;
}
i want to have All table height 100%
pleas help me
this my html code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR....tional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
Body, HTML{
height:100%;
margin: 0;
}
</style>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#808080">
<tr>
<td align="center" valign="top" height="100%" >
<table width="600" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#9900CC">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" height="100%"><table width="100%" height="100%" border="3" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#99FFFF" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><p>fdsfsdfsfsdfsggfhjgjg</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>fghfhgf</td>
</tr>
</table></td>
<td bgcolor="#FF00FF"><p>hfhgfhghfhghffh</p>
</td>
<td valign="top"><table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#990066">
<tr>
<td>ghfghfhfhgfhghfhgfhf</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="500" height="100%">asdada</td>
</tr>
</table></td> </tr>
</table>
</body>
</html>

Bee On Aug 3, 2009 09:22 PM
Aaah SO simple! I thought we had to leave tables behind but I'm creating email newsletters where unfortunately tables are a necessity.

I didn't need to add it to the <html> or <body> tags for it to work, just the wrapping <table>.

I wonder if it will format successfully in email programs such as Outlook 2007 or Gmail? I will let you know my results.

Thanks for the post!

Jack On Sep 6, 2009 10:36 PM
i like this expression
html, body
{
height: 100%;
}

chetan On Sep 13, 2009 09:11 AM
hey guys does the height=100% trick work in PHP as well...coz i am designing pages in PHP that contain tables which need to cover the length of the entire page

Glen On Oct 21, 2009 03:36 AM
I agree to what Computer_guru wrote in his comment. I have a containing div tag wrapped around a table. I have set the html, body, form and div tags' height to 100% and their margins and paddings to 0. Nevertheless, a table (with style="height:100%" set) that is contained inside the main table only wrappes around its content and does not expand to a height of 100%. I am baffled as to why the style won't apply. The only way it expands is when I give it an absolute height, but in my case this just isn't applicable. :/

Any help would really be appreciated.

acka lacka dacka On Nov 24, 2009 11:27 AM
Hi, I'm flatulant and my dung isn't expanding to the bottom of the bowl. Can you put height="100%"?

Flipburger On Jan 12, 2010 01:10 PM
Excellent! Thanks for this! Works like a charm!

Visual C# Kicks On Jan 27, 2010 01:21 PM
Very cool indeed. Personally I'm a fan of tables, although divs are cleaner to use sometimes..

gambling flash casinos On Jan 28, 2010 10:14 PM
The increasing usage of CSS definitions to style HTML markup, CSS files grow bigger and bigger. With this it’s getting more and more complex to find rules that apply the a special element and/or to have one’s code structured properly.

Brian On Feb 6, 2010 10:09 AM
If you have trouble with table height in nested tables, try setting tbody to 100% as well (even if that element isn't explicit in the HTML). This fixed a problem in Safari for me.

Leave a Comment

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