I'm having some trouble with HTML tables when I make this design: The left-hand cell is a rowspan="2" cell, and the right two are using height="50%" attributes. Below is the expected behavior:
+-------------+-----------------+
| | |
| | Equal-height |
| | cell #1 |
| | |
| Scaling- +-----------------+
| height cell | |
| | Equal-height |
| | cell #2 |
| | |
+-------------+-----------------+
What actually happens:
+-------------+-----------------+
| | Equal-height |
| | cell #1 |
| +-----------------+
| | |
| Scaling- | |
| height cell | Equal-height |
| | cell #2 |
| | |
| | |
+-------------+-----------------+
In short, the top of the right-hand two cells is reduced as small as possible, and the bottom one fills the rest of the space. There is an ugly workaround using embedded tables, but I was wondering if there was a more elegant solution. This can also be circumvented by assuming a fixed height for the left-hand cell, and forcing the size (in pixels) for the right-hand cells. This defeats the purpose of a scaling-height cell, though.
To use the height:50% tag, the table needed to have a height. Again, the problem was to due with the element on the left being arbitrarily-sized. So, a fixed height (say 150px) might be a problem if the text on the left was less than 150 px. Thus, setting a 0px height table solved this problem.
<table height="0px" border="1px">
<tr>
<td rowspan="2">
Blah<br>
Blah<br>
Blah<br>
Blah<br>
Blah<br>
Blah<br>
Blah<br>
Blah<br>
</td>
<td height="50%">
Text
</td>
</tr>
<tr>
<td height="50%">
More text
</td>
</tr>
</table>