1

I am trying to put a table inside of a table and have it span 100% of the height of the whole thing, if that makes sense. 

<table width="800" border="2">
<tr>
    <td width="66%">
        box 1
    </td>
    <td width="10" rowspan="2" />
    <td rowspan="2" height="100%" valign="top">
        <table width="100%" height="100%" bgcolor="yellow">
            <tr>
                <td>
                    box 2
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
    </td>
</tr>
 </table>

Basically, i want that "yellow" table to go from the top to bottom of the parent table. I can't set it to a fixed height, because heights of "Box 1" and "Box 3" are dynamic based on whatever is in them.

Is this possible?

Jay Kniffen
  • 57
  • 1
  • 8

2 Answers2

0

Switch this:

<td rowspan="2" height="100%" valign="top">
        <table width="100%" height="100%" bgcolor="yellow">

To this:

<td rowspan="2" height="100%" valign="top" bgcolor="yellow">
        <table width="100%" height="100%">

Putting the background color on the TD parent instead of your TABLE makes the whole area show in yellow.

Edit:

Unfortunately % based height needs something to refer to like a parent element with a pixel height. If the parent has a % height then the parent will need to be referring to a pixel height (or a recursing % up the heirarchy).

Basically, you might only be able to accomplish what you need with a height in pixels somewhere.

Matthew
  • 8,183
  • 10
  • 37
  • 65
  • I was using the yellow as a visual representation of what i need. The real inner table i am working with is formed with many rows and stylized formatting and needs to line up with the bottom of the parent table. I guess i should have been more specific, but i need the whole inner table to stretch 100% of the parent table. – Jay Kniffen Oct 06 '12 at 18:54
  • I thought that might be the case but I gave it a shot anyway. I now know the problem you are facing and it's a bit tricky. DIVs and CSS styling may work better. – Matthew Oct 06 '12 at 18:56
0

The technique to make this work should look like below, however, it looks like the effect of position:relative on TD elements is not defined.

CSS:

td#parent {
  position: relative;
}

table#inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Therefore, your solution is to either use Javascript to dynamically modify the height and width of the inner table or move away from tables and use divs & CSS.

Community
  • 1
  • 1
richardaday
  • 2,814
  • 1
  • 22
  • 17
  • @Jay Kniffen If JavaScript is not out of the question, jQuery has a height function which will tell you the height in pixels of any TD (or any other element with dimensions). – Matthew Oct 06 '12 at 19:28