使用 colspan 和 rowspan 的错误 html 表格渲染答案

【问题标题】：Wrong html table rendering using colspan and rowspan使用 colspan 和 rowspan 的错误 html 表格渲染
【发布时间】：2018-04-11 18:56:28
【问题描述】：

table {
  border: 2px solid;
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 5px;
}

<p>first table </p>
<table>
    <tr> <td rowspan="3">B</td> <td rowspan="2">C</td> <td rowspan="1">D</td></tr>
    <tr> <td rowspan="1">E</td> </tr>
    <tr> <td>F</td> <td>G</td> </tr>
</table>
<p> second table, seems to wrong renden</p>
<table>
    <tr> <td rowspan="3">B</td> <td rowspan="2">C</td> <td rowspan="1">D</td> </tr>
    <tr> <td rowspan="2">E</td> </tr>
    <tr> <td>F</td> </tr>
</table>

在我看来，第二张桌子应该看起来像第一张桌子，除了单元格 E 和 G 应连接到行跨度为 2 的单元格 E。

但没有，它似乎只有 2 行而不是 3 行，为什么？

【问题讨论】：

标签： html css html-table

【解决方案1】：

如果您为每一行指定固定高度，那么您可以观察到差异。它正在正确渲染。我认为这是由于自动调整行高而发生的。我在您的代码中包含了固定高度样式。观察差异。

table {
  border: 2px solid;
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 5px;
}

tr{
  height:20px
}

<p>first table </p>
<table>
    <tr> <td rowspan="3">B</td> <td rowspan="2">C</td> <td rowspan="1">D</td></tr>
    <tr> <td rowspan="1">E</td> </tr>
    <tr> <td>F</td> <td>G</td> </tr>
</table>
<p> second table, seems to wrong renden</p>
<table>
    <tr> <td rowspan="3">B</td> <td rowspan="2">C</td> <td rowspan="1">D</td> </tr>
    <tr> <td rowspan="2">E</td> </tr>
    <tr> <td>F</td> </tr>
</table>

【讨论】：

【解决方案2】：

明白，在我原来的例子中，第二行的高度只是 0 ...

【讨论】：