gpt4 book ai didi

html - html 表格中等高缩放单元格

转载 作者:行者123 更新时间:2023-12-03 17:53:30 24 4
gpt4 key购买 nike

当我做这个设计时,我在使用 HTML 表格时遇到了一些问题:
左边的单元格是一个 rowspan="2"单元格,右边两个使用 height="50%"属性。
以下是预期的行为:

+------------+-----+
| | |
| |等高|
| |单元格 #1 |
| | |
|缩放- +-----------------+
|高度单元格| |
| |等高|
| |单元格 #2 |
| | |
+------------+-----+

实际发生的情况:

+------------+-----+
| |等高|
| |单元格 #1 |
| +---+
| | |
|缩放- | |
|高度单元格|等高|
| |单元格 #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>

关于html - html 表格中等高缩放单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15056338/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com