Html 如果使用rowspan和固定高度，则表格会根据给定的行进行拉伸

我有两张桌子，一张有四行，一张有三行。 每个ist构建在其单元上具有固定的宽度和高度

结果是不同的：有4行的版本在FF和IE中拉伸其单元格，而有3行的版本工作正常

两个样品都是铬色的。 这里怎么了

4行表格：
2布雷特
2霍奇
2霍奇
2霍奇
2霍奇
2霍奇
2霍奇
2布雷特
三行表格：
2布雷特
2霍奇
2霍奇
2霍奇
2霍奇
2布雷特

---

哦，顺便说一句：如果可能的话，目前还没有办法用div重新构建整个系统。

我可以用Firefox确认这种行为，我不知道为什么会发生这种情况，但我找到了一个似乎有效的修复方法：

4行表格：
2布雷特
2霍奇
2霍奇
2霍奇
2霍奇
2霍奇
2霍奇
2布雷特
三行表格：
2布雷特
2霍奇
2霍奇
2霍奇
2霍奇
2布雷特

我没有设置表中每个元素的宽度和高度，而是设置了整个表的宽度和高度以及用于定义单个元素大小的百分比。这会在Firefox和Chrome下产生相同的结果

“宽度”和“高度”的值考虑了原始表中元素之间的间距，但生成的表实际上与原始表略有不同，但在不同浏览器中保持一致

---

编辑：我已经更新了与IE 11一起工作的代码。IE 11需要独立定义行的高度，还需要完整的颜色值。

看起来很有希望！我将在一个真正的数据表上尝试一下！嗯，使用FF和Chrome看起来真的很不错，但是在IE 11中它完全被破坏了。不过，你发布的原始版本在IE中看起来也是完全错误的。我还缺少更多的样式代码吗？是的，那已经错了。不幸的是，你的修复确实适用于FF，现在看起来和Chrome一样，但它不适用于IE。啊哈！我发现IE 11是多么喜欢它。仍然适用于Firefox和Chrome。现在编辑答案。

4-row-table:

<table>
<tr bgcolor="#555">
    <td style="width:100px; height:50px" colspan="2">2 Breit</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
</tr>

<tr bgcolor="#555">
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
</tr>

<tr bgcolor="#555">
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
</tr>

<tr bgcolor="#555">
    <td style="width:100px; height:50px" colspan="2">2 Breit</td>
</tr>
</table>


3-row-table:

<table>
<tr bgcolor="#555">
    <td style="width:100px; height:50px" colspan="2">2 Breit</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
</tr>

<tr bgcolor="#555">
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
    <td style="width:50px; height:100px" rowspan="2">2 Hoch</td>
</tr>

<tr bgcolor=#555>
    <td style="width:100px; height:50px" colspan="2">2 Breit</td>
</tr>
</table>

4-row-table:

<table style="width:218px; height:215px;">
  <tr style="height:25%" bgcolor="#555555">
    <td style="width:50%" colspan="2">2 Breit</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
  </tr>

  <tr style="height:25%" bgcolor="#555555">
    <td style="width:25%;" rowspan="2">2 Hoch</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
  </tr>

  <tr style="height:25%" bgcolor="#555555">
    <td style="width:25%" rowspan="2">2 Hoch</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
  </tr>

  <tr style="height:25%" bgcolor="#555555">
    <td style="width:50%" colspan="2">2 Breit</td>
  </tr>
</table>

3-row-table:

<table style="width:218px; height:160px;">
  <tr style="height:33.33%" bgcolor="#555555555">
    <td style="width:50%" colspan="2">2 Breit</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
    <td style="width:25%" rowspan="2">2 Hoch</td>
  </tr>

  <tr style="height:33.33%" bgcolor="#555555">
    <td style="width:25%" rowspan="2">2 Hoch</td>
    <td style="width:25" rowspan="2">2 Hoch</td>
  </tr>

  <tr style="height:33.33%" bgcolor="#555555">
    <td style="width:50%" colspan="2">2 Breit</td>
  </tr>
</table>