Mon, 2004-03-01 18:50
Hi there,
I have a very simple problem, that, I hope, has a very simple answer. It's an HTML problem that I want an HTML solution to, not a CSS one.
Have a look at this:
http://www.warrender.hillingdon.sch.uk/test/matchingtables.htm
There are 2 simple (1 row, 1 column) tables. 1 of them is red, and the other is blue. They are both located within a larger simple (1 row, 1 column) table, that has a green background.
What I want is for the red table to automatically resize it's height, to match the height of the blue table. How can this be done? I've used 2 different tables, because each one has a different style. The red one has a bright red border, but the blue one doesn't.
Alan
Tue, 2004-03-02 09:31
#1
Matching Tables
In the containing table, more specifically the containing row have this
<tr height="100%">
Regards
Day
Tue, 2004-03-02 13:01
#2
Matching Tables
Hi Day Break,
I THINK I did what you said. But I'm not entirely sure. If you look at the source of this updated version, I think I've set the containing row height to 100%:
http://www.warrender.hillingdon.sch.uk/test/matchingtables2.htm
It still doesn't work though.
Alan
Wed, 2004-03-03 10:54
#3
Matching Tables
No wrong table - Try the <tr> right at the top of all tables.
Ie - the containing row is the main row that holds both tables within it.
Regards
Day
Wed, 2004-03-03 17:24
#4
Matching Tables
Hi Daybreak,
Ok, I've done what you said. But it still hasn't changed anything. Have a look at the code. The first tr has it's height set to 100%, but this hasn't solved the problem:
http://www.warrender.hillingdon.sch.uk/test/matchingtables.htm
Alan
Wed, 2004-03-03 20:00
#5
Matching Tables
You took out the height="100%" from the tables inside. Put them back in (not the containing table, just the two that are inside the row.)
Regards
Day
Wed, 2004-03-03 20:36
#6
Matching Tables
Hi Daybreak,
Well, I think I've done what you told me to, but once again, it doesn't work. What's wrong this time?
http://www.warrender.hillingdon.sch.uk/test/matchingtables.htm
Alan
Thu, 2004-03-04 11:29
#7
Matching Tables
ahhh you took the 100% height out of the TR where it was correct, and then as per my last message instead of putting the 100% height in the <TABLE>'s you put it in the <TR>'s
Easier to give you the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Matching Tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="410" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#99FFCC" id="container">
<tr height="100%">
<td valign="top">
<table height="100%" width="200" align="left" cellpadding="10" cellspacing="10" bgcolor="#FF0000" id="redtable">
<tr>
<td width="223" valign="top" bgcolor="#990033"><p><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif">I
want this red table to automatically stretch to match the vertical
height of the table on the right.</font></p></td>
</tr>
</table>
<table height="100%" width="200" border="0" align="right" cellpadding="10" cellspacing="0" bgcolor="#0000FF" id="bluetable">
<tr height="100%">
<td width="223" valign="top"><p><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif">This
is the blue table, that contains a lot of text that makes it
stretch out and be taller than the red table. See? At the moment
it contains more text than the table on the left, but the table
on the left isn't automatically stretching
itself to match the height of this table. Why is that?</font></p>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Regards
Day
Actually am a bit dissapointed in this - At the moment it works as you have an incomplete Doc Type so pages are forced into quirky mode, but does not work with a correct Doc Type - you get the same bad result as previously.
It does work in Moz but not IE grrr
Mon, 2004-03-15 13:03
#8
Matching Tables
That worked perfectly. Thanks Daybreak.