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

77 comment(S)


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.

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.

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?

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?

sponsored

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&#252;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.

Sanjivani on Feb 23, 2010 09:12 PM

Hi,

In my html code, I am adding dynamic rows to a table and table is not stretching to 100% after that.
I tried setting html and body tag's height property to 100% at design time. But at run time since contents are changing table is not getting streched to 100%.

I would appreciate your help.

Thanks
Sanjivani

Dhayanidhi on Apr 26, 2010 09:10 AM

It works well. Thank you very much.

Airia Linn on Oct 2, 2010 05:06 AM

To solve all problems, read and follow this

http://apptools.com/examples/tableheight.php

designerashish on Dec 29, 2010 05:48 AM

thanks. it works

web tasarimi on Feb 27, 2011 06:42 AM

thanks for info.. good luck..

ROman on Mar 24, 2011 08:37 AM

Hi,

Here is a good article about the height of the elements on page:
http://extremedev.bl....0-does-not-work.html

vijay on Jun 21, 2011 12:21 AM

HTML { min-height: 100%; padding-bottom:1px;}

Just put above code in your css file, It will always maintain your browser height 100%

Cheymaxim on Aug 18, 2011 01:25 AM

Hey—thanks this worked perfectly.

I had a simple page to adjust.
Here's my css quick fix:

* {
height: 100%;
margin: 0;
}

Kalen Fry on Sep 13, 2011 04:47 AM

Thanks so much! Very much helped!

-K

Keir on Nov 23, 2011 06:32 PM

This saved my arse so many years later. thank you

RajeshVoruganti on Jan 4, 2012 05:37 AM

How to set the row height in HTML and get the capturing the height in javascript

RajeshVoruganti on Jan 4, 2012 05:47 AM

How to set the row height dynamically in HTML and also giving the width so now Get the capturing the height in javascript

RajeshVoruganti on Jan 4, 2012 05:48 AM

Please help i need required urgent...

Meridia on Jan 23, 2012 02:42 AM

Setting the 100% height of the table means the table will occupy 100% of the available space vertically http://www.grmm.ru/ .

dsfas on Mar 12, 2012 12:55 AM


bholi@daily deals on Apr 19, 2012 05:21 PM

hello

good information about html.........)


arvind@ssvindustries on Jun 16, 2012 05:03 PM

i have used this code our website......really good post......!!

stelios on Jul 5, 2012 12:50 AM

thanks very much!!!

fd on Sep 8, 2012 09:02 AM

great tip! thanks

Shog on Sep 17, 2012 10:13 PM

Just use:

table
{
height:100%;
}

in the body

<table style="position:absolute" width="100%">

trind09 on Oct 22, 2012 03:18 AM

try this:
Table.Style.Add(HtmlTextWriterStyle.Width, "100%");
Table.Style.Add(HtmlTextWriterStyle.Height, "100%");

chaoos on Nov 2, 2012 01:34 PM

great tip! thanks

Yang on Jan 22, 2013 10:47 AM

it will help you to learn more about table width and height

http://www.corelangs....es/width-height.html

yang

EURO-SPACE on Feb 26, 2013 06:35 AM

This method fails with doctype standards and works only with Quirks mode..

Phanindra Ramesh on Jul 8, 2013 09:48 PM

Thanks alot..... that worked for me

Leon Cassion on Jul 27, 2013 11:23 AM

Very useful.... helps a lot

Rupa on Oct 22, 2013 07:57 AM

Thanks ! this worked for me

Axel Engdahl on Nov 7, 2013 04:01 AM

Hello forum,

I've used this on a few sites but I have an issue. When I look at the site from my computer hdd or through my testing server it works just fine, the table goes all the way up as it is suppose to, but when I upload it to the server it should be on I still get the margin over the table. What can the problem be?

Grupo Actemp on Dec 21, 2013 04:41 AM

Thanks!

Pnr Status on Jan 9, 2014 07:32 AM

Thanks for sharing this great info......

DAG on May 21, 2014 12:05 PM

whaaat? I'm not sure I've ever seen setting width and height in the HTML tag... but sure enough, that fixed the weirdness. Width was behaving okay already but height wasn't. So confusing.

Leave a comment