Link to home
Start Free TrialLog in
Avatar of rcearley
rcearley

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.


<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>

Open in new window

Avatar of Pawel Witkowski
Pawel Witkowski
Flag of Poland image

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 :)
Avatar of rcearley
rcearley

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.  
<!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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Pawel Witkowski
Pawel Witkowski
Flag of Poland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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 :(((
At the time, I was not able to get this to work on my pc.  The solution may work for others though.