使用 rowspan 时 IE 设置行高不起作用

Posted 2023-03-05

【中文标题】使用 rowspan 时 IE 设置行高不起作用

【英文标题】：IE setting row height not working when using rowspan

【发布时间】：2011-09-21 15:16:41

【问题描述】：

只是想知道为什么下面的 html 不起作用。基本上，当我在表格行上设置行跨度时，IE 似乎忽略了我设置的高度：

<table border="1" cellpadding="0" cellspacing="0" >
  <tr>
    <td >A</td>
    <td align="center" rowspan="3">
      Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
    </td>
  </tr>
  <tr>
    <td >B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

有人知道它为什么会这样吗？

【问题讨论】：

我相信如果你必须使用表格，有两个主单元格，然后在主表格的左侧单元格中放置一个三行（每个单元格）的表格会更有意义。您可以根据需要设置第二个表格的行高。

我想过这一点，但用户需要能够将表​​格中的粘贴内容复制到 word/excel 中，这样才能正常工作......因此，在单元格中嵌套表格/div 并不是真正的选项... :(

【参考方案1】：

我相信这里发生的事情是 IE 将分散剩余的可用空间，以填充跨越所有三行的第一个 TR 中的第二个 TD 的高度。

考虑这个例子：

<table border="1" cellpadding="0" cellspacing="0" >
  <tr >
    <td>
      A
    </td>
    <td align="center" rowspan="3">
      Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
    </td>
  </tr>
  <tr>
    <td >
      B
    </td>
  </tr>
  <tr>
    <td >
      C
    </td>
  </tr>
</table>

在这里，我们看到 IE 可以正确呈现，因为 60px + 30px =

我尝试了几个不同的测试用例，似乎证明了这一点。首先承认我可能是错的。

【讨论】：

我注意到 B 没有呈现正确的高度，这可能是意料之中的......奇怪的是，如果你只是行跨度超过 2 个单元格，这不起作用 - 第三个 必须添加。

事实证明它无论如何都不起作用......无论在哪里，我都会一遍又一遍地得到同样的东西。您给出的示例也不起作用，因为第一行的高度为 56 像素，第二行为 75 像素。哼哼。