troubleshooting Question

100% Table Height problem

Avatar of rcearley
rcearley asked on
CSSHTML
6 Comments1 Solution531 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Pawel Witkowski
Senior Javascript Developer
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros