html表格中的等高缩放单元格_Html_Html Table_Cell_Scaling

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

html

html表格中的等高缩放单元格,html,html-table,cell,scaling,Html,Html Table,Cell,Scaling,在进行此设计时，我在HTML表方面遇到了一些问题：左侧单元格是rowspan=“2”单元格，右侧两个单元格使用height=“50%”属性。以下是预期的行为： +-------------+-----------------+ | | | | | Equal-height | | | cell #1 | | |

在进行此设计时，我在HTML表方面遇到了一些问题：左侧单元格是rowspan=“2”单元格，右侧两个单元格使用height=“50%”属性。以下是预期的行为：

+-------------+-----------------+ | | | | | Equal-height | | | cell #1 | | | | | Scaling- +-----------------+ | height cell | | | | Equal-height | | | cell #2 | | | | +-------------+-----------------+ +-------------+-----------------+ | | | ||等高| ||单元#1| | | | |缩放-+-----------------+ |高度单元|| ||等高| ||单元#2| | | | +-------------+-----------------+ 实际发生的情况：

+-------------+-----------------+ | | Equal-height | | | cell #1 | | +-----------------+ | | | | Scaling- | | | height cell | Equal-height | | | cell #2 | | | | | | | +-------------+-----------------+ +-------------+-----------------+ ||等高| ||单元#1| | +-----------------+ | | | |缩放-|| |高度单元|等高| ||单元#2| | | | | | | +-------------+-----------------+ 简言之，右侧两个单元格的顶部尽可能缩小，底部单元格填充其余空间。使用嵌入式表有一个难看的解决方法，但我想知道是否有更优雅的解决方案。这也可以通过假设左侧单元格的高度固定，并强制右侧单元格的大小（以像素为单位）来避免。但是，这违背了缩放高度单元的目的。


<table border=1>
<tr>
<td rowspan="2" style="height:300px;width:100px;text-align:center">First Column</td>
<td style="height: 150px;width:100px;text-align:center">Cell #1</td>
</tr>
<tr>
<td style="height:150px;width:100px;text-align:center">Cell #2</td>
</tr>
</table>

第一列
第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>

功能设置单元高度（高度）{
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'；
}
第一列
第1单元
第2单元

或者，用户可以如下设置高度：

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>

函数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'；
}
改变高度

要使用高度：50%标签，表格需要有一个高度。同样，问题是由于左侧元素的大小是任意的。因此，如果左侧的文本小于150px，固定高度（比如150px）可能会有问题。因此，设置0px高度表解决了此问题

<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>


废话

废话

废话

废话

废话

废话

废话

废话

正文
更多文本

您正在测试哪些浏览器？尝试

表布局：修复了您可以使用div布局来代替、，，。这是一个有点混乱的版本-使用浏览器进行测试：Chrome、Safari（Mac OSX）当前对表格布局的实验：fixed不起作用，我已经在表格标题和表格行中尝试过了。
div不可缩放，因此解决方案不起作用。正如我所说，我不想使用固定高度。因此，这不是一个解决方案。不幸的是，这是在维基上，所以javascript是不允许的。事实上，我通过在父单元格中添加一个height:0px来解决这个问题。这显然不会影响单元格的高度，但确实允许基于百分比的缩放正常工作。