How can I make the last row in this HTML code take up the remaining height, while allowing rows "one", "two", and "three" to only take as much height as they need?
This layout functions correctly in Chrome but not in Firefox or IE.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
The goal is for the last row with "full" to be tall, and rows "one", "two", and "three" to be minimal in height.
I've attempted setting specific heights on the rows like "<tr style="height:20px;">, as well as applying 100% height to the last row, but have not found success yet!
Update:
This design will accommodate various types of content, adapting the table size accordingly. If the div is large, the table should adjust to that height, but if the div is small, then rows "one", "two", and "three" should determine the table's height.