使用rowspan时，IE设置行高不起作用 [英] IE setting row height not working when using rowspan

问题描述

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

Just wondering why the following HTML doesn't work. Basically when ever I set rowspan on a tables row, IE seems to ignore the the heights that i've set:

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

有谁知道为什么它的表现如此呢？

Does anyone know why its behaving this way?

推荐答案

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

I believe what is happening here is that IE will spread the remaining space available in order to fill the height of the second TD in the first TR that spans all three rows.

考虑这个例子：

<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr height="30px">
    <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 height="60px">
      B
    </td>
  </tr>
  <tr>
    <td height="100%">
      C
    </td>
  </tr>
</table>

在这里，我们看到IE呈现正确，因为60px + 30px =<第二列的总高度，所以我们告诉最终的td为100％的高度，以便占用剩余的空间，因此IE不会在行中传播它。

Here we see that IE renders properly because 60px + 30px = < total height of second column so we tell the final td to be height 100% in order take whatever space is leftover so IE doesn't spread it across the rows.

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

I tried a few different test cases and that seemed to prove out. First to admit though I could be wrong.

这篇关于使用rowspan时，IE设置行高不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！