Question

制作此设计时，我在使用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       |
    |             |                 |
    |             |                 |
    +-------------+-----------------+

简而言之，右手两个单元的顶部尽可能地减小，底部单元填充剩余的空间。使用嵌入式表有一个丑陋的解决方法，但我想知道是否有更优雅的解决方案。这也可以通过假设左侧单元格的固定高度，并强制右侧单元格的大小（以像素为单位）来规避。然而，这违背了缩放高度单元的目的。

Answer 1

真的很晚......如果使用javascript如下，其中height是你设置的数字？

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>

Answer 2

要使用高度：50％标签，表格需要有一个高度。同样，问题是由于左边的元素是任意大小的。因此，如果左侧的文本小于150像素，则固定高度（例如150像素）可能是个问题。因此，设置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>

Answer 3

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

html表中的等高缩放单元格

3 个答案: