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

Question

我需要布置一张表格或类似的东西，并且行距的单元格是偏移的，就像这样：

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

最重要的方面是，指示的两条（

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

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

应该可以使用这样的标记：

<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

尝试一下。 Acutall不好，但是可以用。

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