Chrome doesn't honor row height if rowspan is present

Question

I want to make a table with a cell that spans on two rows. The second row must have the height size as minimum as possible. Example:

html:

Answer 1

Answer from Lucas Malor almost works.

It happens that IE doesn't respect table height=100% :( For me solution was easy, I just set height in pixels, because I know height of first column.

Answer 2

Found: the trick is to put another table inside a cell of the table with the non-rowspan content, remove the rowspan from the other cell and set the outer and inner table height to 100%. Horrible but effective.

HTML:

<table id="outer"><tbody><tr>
    <td>
        <table id="inner"><tbody>
            <tr id="row-1">
                <td>1st row</td>
            </tr>
            <tr id="row-2">
                <td>2nd row</td>
            </tr>
        </tbody></table>
    </td>
    <td>
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
    </td>
</tr></tbody></table>

CSS:

#row-2 
{
    height: 1px;
}
#outer, #inner 
{
    height:100%;
}

http://jsfiddle.net/xp7vz/3/

Answer 3

try position:fixed

it sort of works. http://jsfiddle.net/43CEX/

i think in general you want to use divs for this kind of work, since tables natively grow by their own

update

this http://jsfiddle.net/h4Ycj/

or this http://jsfiddle.net/m7eqm/