How to get nested table to be height of the parent table?

Height=100% doesn't work

[MichaelBluejay]

Is there a way to get the height of a nested table to be the same height as the parent table? I tried height=100%, both in HTML and CSS, but the nested table is still too short.

Here's why I'm trying to do that, in case I should be approaching this from a completely different angle: I have a basic three-column layout:

navigation/ads + content + ads

I'd like the final ads in each of the sidebars to hug the bottom of the page. So in the left and right-hand columns I put in a two-row table, with the top row set to ALIGN=TOP and the bottom row set to ALIGN=BOTTOM. The first navigation blocks & ads go in the top cell, and the rest go in the bottom. Problem is that the nested table isn't as tall as the page.

One way to force the ads to be on the bottom of the table is to not use nested tables, and just have two rows with the main table, and ROWSPAN=2 for the content cell. The problem there is that the left-hand and right-hand cells are the same height as each other, when they need to be different (fluid) heights.

I hope this makes sense. Thanks for your help!

[tedster]

The correct attribute for a <td> element is valign="top", and not align="top"? Does making that change help your layout behave?

[MichaelBluejay]

Sorry, I mistyped in my post. My HTML correctly uses VALIGN. Anyway, it's not the alignment that's the problem, it's the fact that I can't get the nested table to be the same height as the parent table.

[grelmar]

Double check to make sure you've set celpadding and spacing to equal zero. A lot of HTML editors default it to a low value (say, 2) for each atribute. In a nested table, it adds up quickly. Space 2 + pad 2, in the original table, plust Space 2 + pad 2 in the nested table, and alla the sudden you have avery noticeable 8 pixel difference.

It's such a simple mistake, that I make it frequently.

[CaseyRyan]

It's been my experience that setting the padding and margin explicitly in your parent table <td> tag solves this problem. Use the style tag in bold below.

For example:

<table cellpadding=0 cellspacing=0 border=0 height="500" width="300">
 <tr>
 <td [b]style="padding:0;margin:0"[/b]><table cellpadding=0 cellspacing=0 border=0 height="100%">
 <tr>
  <td>my content</td>
 </tr>
 </table></td></tr>
</table>

There's prolly a better way to do this, but this has worked in the past for me.

-=casey=-

[MichaelBluejay]

Thanks for the help, but I'm not sure you got what my problem is. I don't really care about the spacing or padding, and I don't think it has anything to do with my problem. My issue is, given that I have a table inside a <TD>, how do I get the nested table to be as tall as the <TD>?

[grelmar]

Check the parent table. Chances are, it has cellpadding or cellspacing values. If it does, you'll never get the nested table to be 100% of the size of the cel you're nesting in.

This won't work:

<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td><table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Nested Data</td>
</tr>
</table>
</td>
</tr>
</table>

But this should work:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Nested Data</td>
</tr>
</table>
</td>
</tr>
</table>

[MichaelBluejay]

Okay, I guess I'm still not explaining myself well.

The padding and the spacing doesn't matter. My problem isn't that the nested table is off by a couple of pixels, it's that it's off by about THIRTEEN INCHES.

I did just figure out part of the problem: The outer table has to have its own height set to 100%. If it's not specified then the inner table won't grow to the height of the outer table. That fixes it in IE6.

Safari is still cranky, though. The nested table won't grow. It's still collapsed.

Does that make more sense? Here's my code:

<TABLE BORDER=0 BGCOLOR="#808080" CELLSPACING=0 CELLPADDING=0 WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="50%">
<P></P>
</TD>
<TD>
<TABLE BORDER=0 BGCOLOR="#FFFF00" CELLSPACING=0 CELLPADDING=0 WIDTH="100%" HEIGHT="100%">
<TR>
<TD VALIGN=top>
<P>Top Ad</P>
</TD>
</TR>
<TR>
<TD VALIGN=bottom>
<P>Bottom Ad</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

[grelmar]

Ahhh! I see it now.

lemme work on it .

[grelmar]

Try setting the TD attributes in the parent table all to have a height of 100%... They need to all have the same height. Also, set the TR atribute in the parent cel to 100%, and the TR in the nested to 100%.

Sometimes you just have to get stupidly explicit.

[MichaelBluejay]

I got as stupid as I could, setting every height in the table to 100%, but Safari still won't grow my nested table. Bad Safari, bad bad bad!

<TABLE BORDER=0 BGCOLOR="#808080" CELLSPACING=0 CELLPADDING=0 WIDTH="100%" HEIGHT="100%"> 
 <TR> 
 <TD WIDTH="50%" HEIGHT="100%"> 
 <P></P> 
 </TD> 
 <TD HEIGHT="100%"> 
 <P><TABLE BORDER=0 BGCOLOR="#FFFF00" CELLSPACING=0 CELLPADDING=0 WIDTH="100%" HEIGHT="100%"> 
 <TR> 
 <TD VALIGN=top HEIGHT="100%"> 
 <P>Top Ad</P> 
 </TD> 
 </TR> 
 <TR> 
 <TD VALIGN=bottom HEIGHT="100%"> 
 <P>Bottom Ad</P> 
 </TD> 
 </TR> 
 </TABLE> 
 </P> 
 </TD> 
 </TR> 
</TABLE>

[MichaelBluejay]

I replaced all the <height=100%> with <style="height:100%"> but still no worky.

Checking around I found that the height attribute is deprecated, and others confirmed that it doesn't work the way I hoped it would in Safari. And CSS is no better, because while the term "height" is part of the vocabulary they never got around to defining it. From w3.org:

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value specifies the height explicitly; the table may thus be taller or shorter than the height of its rows. CSS2 does not specify rendering when the specified table height differs from the content height, in particular whether content height should override specified height; if it doesn't, how extra space should be distributed among rows that add up to less than the specified table height; or, if the content height exceeds the specified table height, whether the UA should provide a scrolling mechanism. Note. Future versions of CSS may specify this further.

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the computed row height is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS2 does not define what percentage values of 'height' refer to when specified for table rows and row groups.

In CSS2, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). A value of 'auto' for 'height' implies a computed value of MIN. CSS2 does not define what percentage values of 'height' refer to when specified for table cells.

[grelmar]

huh. I'm gonna have to say "crap" actually, because I think this means I'm gonna have to go look at some of my own stuff.

Bad Safari indeed. Might have to resort to doing an iFrame, or maybe a layered iFrame (an iFrame that's 2 deep), whihc would suck on a number of levels. First, because I think that in most cases, iFrames are a cheap trick of a work around, and second, because I've never had any need, I'll have to actually find out how to layer iFrames.

Now, time to go look at my own stuff.

Thanks for bringing it up, if for no other reason than it debunks an assumption or two I'd been making. Truth is, I test against a pile of browsers, but Safari just isn't one of them.

[tedster]

A bit off-topic for the nested tables issue, but Safari, good as it is, has more than a few really unexpected rendering problems. It's a good idea to find a way to check your pages on a Mac (Safari and IE5)

The worst one I ever ran into was a single div where
I could not have two <p> with the first one text-align:left
and the second one text-align:right - (validated code and all
that.) Safari made the second <p> into an inline element and
ignored the alignment rule.

I ended up needing two divs just to get Safari to behave. Even
NN4 exectuted this mark-up properly as long as I used </p> tags.

[grelmar]

Thanks for the advice tedster. I already have 3 different windows boxes, a *nix box, and now time to go out and look for a cheap second hand Mac. Prolly two, because I know from working with other people that OS 9.x runs a lot different from OS X.

The plus side, it's an excuse to cram more tech into the office space (the down side: explaining more tech in the office space to the wife).