HTML tables in tables 100% height

Question

I'm having a bit of a odd issue with my height of tables.

I have parent table (I know, I know tables... but I have no choice :( ) which has one row.. that contains 2 cells. each cell has a table of its own. The children tables have a border around them. I would like them both to stay the same height so that the borders align no matter how much content is in either. (they have flexible amounts of content so it cannot be set)

If you take the code below and dump it into a html file you will see (in Chrome at least) the right child table does not fill 100% of its cell that it is in. If you remove the "height:auto" on the parent table. then it does work but it also makes the parent table 100% height..

Why would these two things effect each other?

<style>
.cl2_h { background:red; }
.cl1_h { background:blue;}
.cl1, .cl2{ width:100%; border:1px solid black;}
table, tbody { height:100%; }
</style>


<table style="border:1px solid red;height:auto;">
<tbody>
<tr style="height:100%;">
    <td style="width:50%">
        <table class="cl2" style="text-align:left;">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        RANDOM TEXT HERE
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Select which asd asdthis item relates to.</span>
                        <ul>
                            <li>
                                <select>
                                    <option value="-1">Please Select...</option>
                                </select>
                            </li>
                            <li>
                                <select>
                                    <option value="302">Please Select...</option>
                                </select>
                            </li>
                        </ul>
                        SOME RANDOM TEXT
                    </td>
                </tr>
            </tbody>
        </table>
    </td> 
    <td>
        <table class="cl2" style="height:100%">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        asd asd asd asda sda(NTF)
                    </td>
                </tr>
                <tr>
                    <td>
                        DROPDOWNLIST Here
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

Something of note is that if i set the parent to 200px then it continues to work... So I guess the real question is why doesn't it work when inside a parent table of "Auto" height

Answer 1

Steve, "height: auto" does not inform the browser in time for render what the final height of the containing table will be so the 100% on the child tables is syntactically superfluous.

Only if you give css with a specified height (or give no height) to the parent container will the children know what "100%" means at render.

If you MUST keep the height: auto on the parent table then @RobB has a good javascript solution, but I would recommend either setting a specific height for the parent table or not setting one at all if you can help it.

Answer 2

You can accomplish this using Javascript/jQuery:

var maxHeight; 
$('.cl2').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).height()); 
}).height(maxHeight);