类似表格的布局，具有偏移的多行跨单元格-浏览器折叠一行

Question

我需要用偏移的跨行单元格来布置一个表或类似的东西，比如：

+--+--+--+
+--+  |  |
+--+--+  |  <--
|  |  |  |
+--+  |  |
|  |  |  |  <<<
|  +--+--+  <--
|  |  |  |
+--+--+--+

最重要的方面是所指示的两条（<-）内部水平线在列之间必须是像素完美的。我不能让任何单元格的内容影响这些单元格排列是否正确。我发现，当我尝试使用表HTML来实现这一点时，在适当的单元格中应用colspans，浏览器会做一些奇怪的事情。它们不是渲染偏移多列单元格，而是折叠一行（<<）以消除偏移。

我把问题归结为以下类型的表格：

+--+--+
|  |  |
+--+  |
|  |  |
|  +--+
|  |  |
+--+--+

使用这样的标记应该是可能的：

<table>
    <tr><td>foo1</td><td rowspan="2">bar12</td></tr>
    <tr><td rowspan="2">foo23</td></tr>
    <tr><td>bar3</td></tr>
</table>

问题是上面的HTML呈现如下：

+--+--+
|  |  |
+--+--+
|  |  |
+--+--+

浏览器将折叠第二行。

为什么会发生这种情况？我如何解决这个问题以实现我需要的布局？

我在尝试使用div布局时遇到了令人失望的结果，因为单元格内容可以覆盖我使用CSS应用的任何高度和宽度约束，即使我使用了"overflow：hidden"。（当打印这样布局的页面时，似乎也会遇到麻烦——div恶意地飞出了布局。）我需要布局优先于显示所有内容。

Answer 1

试试这个。Acutol不是很好，但有效。

HTML

<table cellpadding="0" cellspacing="0">
<colgroup>
    <col />
    <col />
</colgroup>
<tbody>
    <tr>
        <td>Cell-1</td>
        <td rowspan="2">Cell-2</td>
    </tr>
    <tr>
        <td rowspan="2">Cell-3</td>
        <td id="Cell4">Cell-4</td>
    </tr>
    <tr>
        <td>Cell-5</td>
        <td id="Cell6">Cell-6</td>
    </tr>
</tbody>

CSS

*
{
padding: 0;
margin: 0;
}
table
{
border-collapse:collapse;
border-spacing: 0;
margin: 20px;
}
td
{
border: 1px solid black;
}
#Cell4, #Cell6
{
border: none;
text-indent: -3000px
}

Fiddle