当我进行此设计时，我在使用 HTML 表格时遇到了一些问题：
左侧单元格是 rowspan="2" 单元格，右侧两个单元格使用 height="50%" 属性。
以下是预期的行为：
+-------------+-----------------+
| | |
| | Equal-height |
| | cell #1 |
| | |
| Scaling- +-----------------+
| height cell | |
| | Equal-height |
| | cell #2 |
| | |
+-------------+-----------------+
实际发生的情况：
+-------------+-----------------+
| | Equal-height |
| | cell #1 |
| +-----------------+
| | |
| Scaling- | |
| height cell | Equal-height |
| | cell #2 |
| | |
| | |
+-------------+-----------------+
简而言之，右侧两个单元格的顶部被缩小得尽可能小，而底部的单元格则填充了其余的空间。使用嵌入式表格有一个丑陋的解决方法，但我想知道是否有更优雅的解决方案。
这也可以通过假设左侧单元格的固定高度并强制右侧单元格的大小（以像素为单位）来避免。但这违背了缩放高度单元的目的。
真的很晚了...如何使用 javascript，如下所示，其中高度是您设置的数字？
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>
或者，用户可以按如下方式设置高度：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
