Table doesn't take height of 100%, why?

alfardan
alfardan used Ask the Experts™
on
Hello

Please check the attached html code, why doesn't table1 strech to fill the complete space of the <td> that contains it? How do I let it strech 100% of it to have the same height as that of table2?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div align='center'>
	<table border='0' cellpadding='0' style='border-collapse: collapse' align='center'>
		<tr>
			<td valign='top'>
 
				<table name='table1' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
					<tr height=100%>
						<td valign='top' height=100%>TESTING 1 2 3<td>
					</tr>
				</table>
 
			</td>
			<td style='padding-left: 10'></td>
			<td valign='top'>
 
				<table name='table2' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
					<tr height=100%>
						<td valign='top' height=100%>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br><td>
					</tr>
				</table>
 
			</td>
		</tr>
	</table>
</div>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Do you need it like that:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div align='center'>
	<table border='0' cellpadding='0' style='border-collapse: collapse' align='center'>
		<tr>
			<td height="400%" valign='top'>
 
				<table name='table1' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
					<tr height=100%>
						<td valign='top' height=100%>TESTING 1 2 3<td>
					</tr>
				</table>
 
			</td>
			<td style='padding-left: 10'></td>
			<td valign='top'>
 
				<table name='table2' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
					<tr height=100%>
						<td valign='top' height=100%>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br><td>
					</tr>
				</table>
 
			</td>
		</tr>
	</table>
</div>
</body>

Open in new window

Commented:
one line is 100%, if table 2 has 4 lines, than the line in table one must 4(lines)*100%=400%
Britt ThompsonSr. Systems Engineer
Top Expert 2009

Commented:
since HTML 4.0 you're not supposed to assign a height to the table element. Instead use CSS to adjust the height of the table. Also, you need to assign a height to the td tag so the table knows what 100% is.




<table border='0' cellpadding='0' style='border-collapse: collapse' align='center'>
<tr>
<td valign='top' height="100%">
<table name='table1' border='1' cellpadding='0' style='border-collapse: collapse; height:100%;' align='center'>
<tr>
<td valign='top' bgcolor="#333">TESTING 1 2 3
<td> 

Open in new window

Parent container has to have height defined. Try this (only added height=1 to parent table):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div align='center'>
        <table border='0' cellpadding='0' style='border-collapse: collapse' align='center' height=1>
                <tr>
                        <td valign='top'>
 
                                <table name='table1' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
                                        <tr height=100%>
                                                <td valign='top' height=100%>TESTING 1 2 3<td>
                                        </tr>
                                </table>
 
                        </td>
                        <td style='padding-left: 10'></td>
                        <td valign='top'>
 
                                <table name='table2' border='1' cellpadding='0' style='border-collapse: collapse' align='center' height=100%>
                                        <tr height=100%>
                                                <td valign='top' height=100%>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br>TESTING 1 2 3<br><td>
                                        </tr>
                                </table>
 
                        </td>
                </tr>
        </table>
</div>
</body>
</html>

Open in new window

Author

Commented:
Thanks to you all

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial