【发布时间】：2014-07-27 21:15:25
【问题描述】：
可以通过适当使用 rowspan 和 colspan 在 HTML 表格中重现 Excel 中合并和未合并单元格的任意排列，还是有限制？我已经seen 在这里解决了一些非常复杂的安排，所以我充满希望。
我有一个 8 行 5 列的网格，它被合并到 16 个不同的单元格中，分别代表 8 个部分的标题和内容，标记为 A-H。
这是我试图实现的安排，就像它在 Excel 中的样子（单元格 B2:F9）：
这是我如何概念化 HTML 跨度：
以下标记是我的最佳近似值：请注意，红色 div 旨在表示部分内容的任意大小。
<style>
table {
border-spacing: 0;
width: 1500px;
}
table > tbody > tr > td {
border: 1px solid black;
vertical-align: top;
text-align: center;
}
table > tbody > tr > td > div {
margin: 0 auto;
border: 1px red solid;
}
</style>
<table>
<tr id="Row1">
<td>A
</td>
<td colspan="2">B
</td>
<td colspan="2">C
</td>
</tr>
<tr id="Row2">
<td>
<div style="width: 340px; height: 100px;" />
</td>
<td colspan="2" rowspan="3">
<div style="width: 450px; height: 200px" />
</td>
<td colspan="2" rowspan="5">
<div style="width: 400px; height: 100px" />
</td>
</tr>
<tr id="Row3">
<td>D
</td>
</tr>
<tr id="Row4">
<td rowspan="5">
<div style="width: 340px; height: 100px;" />
</td>
</tr>
<tr id="Row5">
<td colspan="2">E
</td>
</tr>
<tr id="Row6">
<td colspan="2">
<div style="width: 450px; height: 200px;" />
</td>
</tr>
<tr id="Row7">
<td>F
</td>
<td colspan="2">G
</td>
<td>H
</td>
</tr>
<tr id="Row8">
<td>
<div style="width: 330px; height: 100px" />
</td>
<td valign="top" colspan="2">
<div style="width: 200px; height: 100px" />
</td>
<td valign="top">
<div style="width: 200px; height: 100px" />
</td>
</tr>
</table>
它会生成：
我的解决方案有两个问题：
- 标题“D”（第 3 行）的底部边缘似乎与 标头“E”（第 5 行），标头“D”太高。相反，我认为“A”下方的内容单元格应该缩小以适应 div，将标题“D”向上绘制。
- 我无法解释为什么超过一半的单元格（B、C、E、F、H）对它们来说太宽了 内容。表格最终比我需要的要宽得多 - 我希望像 G 那样有更多的单元格来适应它们的内容。
不同浏览器的渲染是一致的。我的跨度是否有误，或者由于某种原因无法实现？
【问题讨论】：
标签： excel html-table