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

Posted 2023-03-05

技术标签:

【中文标题】html表格中的等高缩放单元格【英文标题】：Equal-height scaling cells in an html table 【发布时间】：2013-02-09 23:15:32 【问题描述】：

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

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

实际发生的情况：

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

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

【问题讨论】：

你在测试什么浏览器？试试table-layout: fixed 你可以改用 div 布局，，。这是一个有点混乱的版本 - jsfiddle.net/Kx6w4 用浏览器测试：Chrome、Safari (Mac OSX) 当前使用 table-layout:fixed 的实验不起作用，我已经在表格标题和表格行中尝试过。Div 无法缩放，因此该解决方案不起作用. 【参考方案1】：

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

【讨论】：

正如我所说，我不想使用固定高度。因此，这不是解决方案。【参考方案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>

【讨论】：

不幸的是，这是在 wiki 上，因此不允许使用 javascript。事实上，我确实通过向父单元格添加 height:0px 解决了这个问题——这显然不会影响单元格的高度，但确实允许基于百分比的缩放正常工作。【参考方案3】：

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

<table  border="1px">
  <tr>
    <td rowspan="2">
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
    </td>
    <td >
      Text
    </td>
  </tr>
  <tr>
    <td >
      More text
    </td>
  </tr>
</table>

【讨论】：

以上是关于html表格中的等高缩放单元格的主要内容，如果未能解决你的问题，请参考以下文章