Table-like layout, with offset multiple-row-span cells - browser collapses a row

Question

I need to lay out a table, or something similar, with row-spanning cells that are offset, something like this:

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

The most important aspect is that the two indicated (<--) internal horizontal lines must be pixel-perfect across columns. I can't have the content of any of the cells affect whether these line up right. I have found that when I try to accomplish this using table HTML, with colspans applied to the appropriate cells, browsers do something odd. Rather than render the offset multi-column cells, they collapse a row (<<<) to eliminate the offset.

I have boiled the problem down to the following type of table:

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

which should be possible using markup like this:

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

The problem is that the above HTML renders like this:

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

The browser collapses the second row.

Why does this happen? How can I work around this problem to achieve the layout I need?

I have had disappointing outcomes trying to do this with a div layout, as the cell contents can override any height and width constraints I apply using CSS, even when I have used 'overflow:hidden'. (There also seem to be gotchas when it comes time to print a page laid out this way - divs fly out of the layout maliciously.) I need the layout to take priority over displaying all of the contents.

Answer 1

Try This. Acutall not that good, but works.

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