Table height 100%

subhadip · #1 (**permalink**) Sep 26th, 2007, 12:51

Hi All,

In html if we write without "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">" at the top of your html code

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top" style="background:#ff0000">this is a test</td>
</tr>
</table>

then, the table will cover the whole browser area.

but if you paste the same table code with "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">" at the top of your html code

then the table will take height of only its content.

Can you tell me how to make table height matching browser height along with at the top of html code written "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">"

Regards
Subha

welshstew · #2 (**permalink**) Sep 26th, 2007, 13:26

Subha,

It's not that the browser isn't recognising ro ignoring the height attribute, it's that when you are in a standards compliance mode, it's expanding it to 100% height of the html and body area.

In order to fix this you can add the following code:

Code: Select all

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

Your table should expand to the height you then set.

Stew

P.S why not switch to CSS tabless design, much nicer.....

AdRock · #3 (**permalink**) Sep 26th, 2007, 13:43

Quote:

Originally Posted by welshstew

Subha,

It's not that the browser isn't recognising ro ignoring the height attribute, it's that when you are in a standards compliance mode, it's expanding it to 100% height of the html and body area.

In order to fix this you can add the following code:

Code: Select all

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

Your table should expand to the height you then set.

Stew

P.S why not switch to CSS tabless design, much nicer.....

And easier to manage

subhadip · #4 (**permalink**) Sep 26th, 2007, 14:08

Thank you welshstew,

The problem is solved with IE, my purpose is solved, thanks a lot.

But in firefox it is not working.

Regards
Subha

welshstew · #5 (**permalink**) Sep 26th, 2007, 14:15

weird works for me.

can you post a link of the code to have a look.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to constrain the height of a dynamic table	MrQuestions	Web Page Design	3	Mar 15th, 2008 00:08
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
Problems with height in a table-row element	llpamies	Web Page Design	3	Aug 9th, 2007 18:02
Table Height 100% only when refreshed….	mrunclesam	Web Page Design	9	Dec 22nd, 2006 15:05
100% Table Height Problems	joshcxa	Web Page Design	5	Aug 3rd, 2005 03:12

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Table height 100%