6 replies to this topic

[pizzaboy]

I've got 2 tables and I'm trying to get them so they both have the same height.

My code looks like this:

  <tr>
	<td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="table1">
// 6 rows...
	  <tr>
		<td> </td>
	  </tr>
	</table></td>
	<td><table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0" id="table2">
// 2 rows...
	  <tr>
		<td> </td>
	  </tr>
	</table></td>

Is there a problem with setting the height of a table to 100% or am I just using it incorrectly? I've even tried changing the table heights within CSS (#table1, #table2 { height: 100%; } ), but no success there either...

Whats going on?

Any help is appreciated, thanks.

[Stu]

should the <tr> and <td> tags be inside the tables? not the tables inside the <tr> and <td>...

[Squid]

^Agreed

But, the more rows you insert into the table, the higher it will get. So, 6 rows will be higher than 2 rows.

[rc69]

Actually, if he has a table tag before the first <tr> he posted, then it's fine.
And he wants to make the table as is, the full height of the screen, not just add content to make it higher.

First rule of CSS. An element can only be as tall or wide as it's containing element when using % sizes.
In other words, try making the columns or row or table containing those tables have the height:100%

[raenef]

True, also are your html and body set to 100% as well?
http://www.quirksmod...percheight.html

[pizzaboy]

Problem solved!!!

Although it sounds obvious, I obviously needed reminding that 6 rows and 2 rows would never be the same height!

The way around my problem was making both tables of equal rows and setting their heights to the largest of the 2 tables (in pixels). The original content (6 rows from table1 and 2 rows from table2) were then inserted inside the new tables to visually hide the fact that the tables were not of the same height.

Anyway, my conclusion is still... What the hell is the Table Height=...% supposed to do???


Thanks for the help guys!!

[Wybe]

It's supposed to make <table> the height in percentages of the container it's in.

the height attribute is not recognized in certain versions (if not all) XHTML. You better do it using CSS it's the same but in CSS it validates, lol.