Question

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，为什么？

Answer 1

如果给每行固定高度，那么你可以观察到差异。它渲染得当。我认为这是因为自动调整行的高度。我在你的代码中包含了固定高度样式。观察差异。

＆＃13;

table {
  border: 2px solid;
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 5px;
}

tr{
  height:20px
}

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: