Menu
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.
323
Really late...how about using javascript as follows where height is a number you set?
function SetCellHeight(height) {
document.getElementById('ReferenceCell').style.height = height + 'px';
document.getElementById('Cell1').style.height = (0.5 * height) + 'px';
document.getElementById('Cell2').style.height = (0.5 * height) + 'px';
}
<body onload="SetCellHeight(height)">
<table border=1>
<tr>
<td id="ReferenceCell" rowspan="2">First Column</td>
<td id="Cell1">Cell #1</td>
</tr>
<tr>
<td id="Cell2">Cell #2</td>
</tr>
</table>
Alternatively, the user can set height as follows:
function SetCellHeight() {
var height = document.forms.tdHeightForm.heightinput.value.trim();
document.getElementById('ReferenceCell').style.height = height + 'px';
document.getElementById('Cell1').style.height = (0.5 * height) + 'px';
document.getElementById('Cell2').style.height = (0.5 * height) + 'px';
}
<form id="tdHeightForm"><input type="text" name="heightinput"><button type="button"
onclick="SetCellHeight()">Change Height</button></form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
