IE setting row height not working when using rowspan

Question

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:

相关标签:

Answer 1

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.

Consider this example:

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

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 tried a few different test cases and that seemed to prove out. First to admit though I could be wrong.