复杂的表rowspan和colspan
Excel中合并和非合并单元格的任意排列可以通过适当使用rowspan和colspan在HTML表格中重现，还是有其局限性？ 我已经看到在这里解决了一些相当复杂的安排，所以我很有希望。
我有一个由8行和5列组成的网格，它们合并成16个不同的单元格，分别代表8个部分的标题和内容，标记为AH。
这是我试图达到的安排，因为它看起来在Excel中（单元格B2：F9）： 
这里是我如何概念化HTML跨度：
以下标记是我最好的近似值：请注意，红色divs旨在表示节的内容的任意大小。
的jsfiddle
<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> 它产生这个： 
我的解决scheme有两个问题：
- 标题“D”（第3行）的底部边缘似乎与标题“E”（第5行）的顶部边缘相连，而标题“D”太高。 相反，我认为“A”下面的内容单元应该缩小以适应div，并将标题“D”向上绘制。
- 我无法解释为什么超过一半的细胞（B，C，E，F，H）的内容太宽了。 桌子比我需要的要宽得多 – 我希望有更多的单元能像G那样适合他们的内容。
渲染在浏览器中是一致的。 我是否犯了我的跨度错误，或者由于某种原因无法实现？
现在你正在让浏览器解释表中每个单元格的宽度和高度。 您需要设置每个单元格的宽度和高度属性来解决您的问题。
<table> <tr id="Row1"> <td width="340">A </td> <td colspan="2" width="450">B </td> <td colspan="2" width="450">C </td> </tr> <tr id="Row2"> <td width="340" height="100"> <div style="width: 340px; height: 100px;" /> </td> <td colspan="2" rowspan="3" width="450"> <div style="width: 450px; height: 200px" /> </td> <td colspan="2" rowspan="5" width="400"> <div style="width: 400px; height: 100px" /> </td> </tr> <tr id="Row3"> <td>D </td> </tr> <tr id="Row4"> <td rowspan="5" width="340"> <div style="width: 340px; height: 100px;" /> </td> </tr> <tr id="Row5"> <td colspan="2" width="450">E </td> </tr> <tr id="Row6"> <td colspan="2" width="450"> <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 width="350"> <div style="width: 350px; height: 100px" /> </td> <td valign="top" colspan="2" width="200"> <div style="width: 200px; height: 100px" /> </td> <td valign="top" width="300"> <div style="width: 300px; height: 100px" /> </td> </tr> </table>
看更新小提琴 。