Auto max height table in table

Question

<table id="one">
    <tr>
        <td>

            <table id="two">
                <tr><td>qqq</td> <td>www</td> </tr>
            </table>


        </td> <td>12 <br /> 34 <br />56 </td>
    </tr>
    <tr>
        <td> </td> <td> aaa</td>
    </tr>
<table>

#one td {
    border: solid 1px red;
}

#two {
    background-color: green
}

LIVE EXAMPLE: http://jsfiddle.net/QMQ3R/3/

I would like - td with qqq and www have auto max height in table#one tr td .

How can I make it? 12, 34, 56 are generated with PHP. There can be for example 10 BR

Answer 1

It's funny, set #one td and #two to height: 100% and it works in Firefox, not Chrome. Set an arbitrary number (like 1px ) to #one td and it works in Chrome, not Firefox. Set the height on #one td to 0 and it works in Firefox and Chrome, not IE. That's hacky though and I don't like it. Here's the (hacky but working) example anyway:

http://jsfiddle.net/QMQ3R/8/

Nested tables SUCK, try not to use them. They aren't valid in HTML5. Also, don't duplicate IDs.