8 replies [Last post]
Alan
Offline
Enthusiast
Last seen: 17 years 41 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

Tags:
Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 37 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Matching Tables

In the containing table, more specifically the containing row have this

<tr height="100%">

Regards
Day

The only way to learn is to do it yourself

Alan
Offline
Enthusiast
Last seen: 17 years 41 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 37 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

Alan
Offline
Enthusiast
Last seen: 17 years 41 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 37 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

Alan
Offline
Enthusiast
Last seen: 17 years 41 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 37 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

Laughing out loud 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

The only way to learn is to do it yourself

Alan
Offline
Enthusiast
Last seen: 17 years 41 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Matching Tables

That worked perfectly. Thanks Daybreak.