asked on
100% Table Height problem
In the following code, I need the inner table (the table that has the word test in it) to fill it's container to 100%. The outer most table's content may change, so I'm wanting the inner table to be able to always fill it's area to 100%.
The strange thing I noticed is that if I set the outer table's hieght to 200px or 500px, then the inner table will fill 100% of it's area, which is good ; however, this is not a valid technique to fix this issue because the outer table's amount of data could always change so I can't set the outer's table height to a fixed height.
I have read through several other posts on experts-exchange and other links that talk about the same problem, but i'm not able to get it to work with my code.
How can I get the inner table to expand to 100% of the <TD> that it is in? An example would be appreciated over a link.
The strange thing I noticed is that if I set the outer table's hieght to 200px or 500px, then the inner table will fill 100% of it's area, which is good ; however, this is not a valid technique to fix this issue because the outer table's amount of data could always change so I can't set the outer's table height to a fixed height.
I have read through several other posts on experts-exchange and other links that talk about the same problem, but i'm not able to get it to work with my code.
How can I get the inner table to expand to 100% of the <TD> that it is in? An example would be appreciated over a link.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
}
</style>
</head>
<body >
<form id="form1" runat="server">
<div>
<table cellspacing=0 cellpadding=0 align=center height=100%>
<tr>
<td valign=top>
<table height=100% border=1>
<tr>
<td >test</td>
</tr>
</table>
</td>
<td style="width: 580px;" valign="top">
<table height=100% >
<tr>
<td style="width: 785px; valign="top">
<br /><br /><br /><br /><br /><br /><br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
HTMLCSS
Last Comment
rcearley
Hmm I really tried to help here but I do not see any problem with this table. I get this code you provided, and check it on FF, Opera, IE, and Safari and all looks the same and table uses 100% of window, so maybe I just understand you wrong or something.. huh :)
ASKER
that would explain why no-one has posted any responses. ok, i see that i'm missing the doctype parameter. the code above should look like the following. note that the only difference is the doctype. it seems that if i remove the doctype then it works, but i use doctype, then the inner table doesn't go to 100%.
The problem i see now is that if i remove doctype, then all of my stylesheet formatting doesn't work.
The problem i see now is that if i remove doctype, then all of my stylesheet formatting doesn't work.
<!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" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
}
</style>
</head>
<body >
<form id="form1" runat="server">
<div>
<table cellspacing=0 cellpadding=0 align=center height=100% border=1>
<tr>
<td valign=top>
<table height=100% border=1>
<tr>
<td >test</td>
</tr>
</table>
</td>
<td style="width: 580px;" valign="top">
<table height=100% >
<tr>
<td style="width: 785px; valign="top">
<br /><br /><br /><br /><br /><br /><br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
It works on your machine with the same doctype element? I'm running IE 6 and it's not working on mine. I tried 3 other doctype options I found on the element and they fix the height problem...but the doctype element removed all stylesheet settings as well.
I tested it on IE 7.0, safari, firefox and opera but i dont have IE 6.0 :(((
ASKER
At the time, I was not able to get this to work on my pc. The solution may work for others though.