Question

我有两张桌子，一张有4行，有一张有三张。每个都在它的细胞上构建，具有固定的宽度和高度。

结果不同：4行的版本在FF和IE中延伸了它的单元格，而3行的版本工作正常。

这两个样本在Chrome中看起来都不错。这里出了什么问题？

http://jsfiddle.net/SchweizerSchoggi/mrg4L2vt/

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>

哦，顺便说一下：如果可能的话，目前没有选择用div重建整个东西。

Answer 1

我可以确认Firefox的行为，我不知道它为什么会发生，但我找到了一个似乎有效的修复：

https://jsfiddle.net/mcwjtotn/

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>

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

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

编辑：我已经更新了代码以便与IE 11一起使用。 IE 11需要独立定义行的高度，并且还需要全长颜色值。

如果使用rowspan和固定高度，表会拉伸，具体取决于给定的行

1 个答案: