>> JSFIDDLE demonstration问题的<<
从如下 HTML 表格开始:
+------------+------------+------------+
| | | |
| (0, 0) | (0, 1) | (0, 2) |
| | | |
+------------+------------+------------+
| | | |
| (1, 0) | (1, 1) | (1, 2) |
| | | |
+------------+------------+------------+
| | | |
| (2, 0) | (2, 1) | (2, 2) |
| | | |
+------------+------------+------------+
我想制作 2 组交错的合并单元格，如下所示:
+------------+------------+------------+
| | |
| | (0, 2) |
| Merged cell | |
+ Group #1 +------------+
| | |
| | G |
| | r |
+------------+------------+ o #2 +
| | | u |
| (2, 0) | (2, 1) | p |
| | | |
+------------+------------+------------+
我遇到的问题是，当我尝试使用这种布局制作 HTML 表格时，中间的行消失了:
+------------+------------+------------+
| | |
| Group #1 | (0, 2) |
| | |
+-------------------------+------------+
| | | Group |
| (2, 0) | (2, 1) | #2 |
| | | |
+------------+------------+------------+
也就是说，Web 浏览器(最新版本的 Chrome、Firefox 和 IE)绝对不允许第 1 组的右下角和第 2 组的左上角在同一行。相反，中间一排神奇地消失了，并迫使角落对角线相对。
HTML代码:
<table>
<tr>
<td rowspan="2" colspan="2">Group #1</td>
<td>(0, 1)</td>
</tr>
<tr>
<!-- ROW THAT MAGICALLY DISAPPEARS -->
<td rowspan="2">G#2</td>
</tr>
<tr>
<td>(2, 0)</td>
<td>(2, 1)</td>
</tr>
</table>
有办法解决这个问题吗？
>> JSFIDDLE demonstration问题的<<
最佳答案
我不确定我能否解释为什么会发生这种情况的更详细的细节，除了表格会折叠该行，因为该行上没有任何内容需要大于零的高度。
要修复它，您可以只向行添加一个隐藏元素，这将使行保持正常高度(这里使用样式标签完成说明，但您当然会使用 css 类来完成)
<table>
<tr>
<td rowspan="2" colspan="2">Group #1</td>
<td>(0, 1)</td>
<td style="visibility:hidden;border-style:none;"> </td>
</tr>
<tr>
<!-- MAGICROW -->
<td rowspan="2">G#2</td>
<td style="visibility:hidden;border-style:none;"> </td>
</tr>
<tr>
<td>(2, 0)</td>
<td>(2, 1)</td>
<td style="visibility:hidden;border-style:none;"> </td>
</tr>
</table>
关于HTML 表格交错单元格合并，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17514828/