Табличный макет со смещенными ячейками из нескольких строк - браузер сворачивает строку

Question

Мне нужно выложить таблицу, или что-то подобное, со смещенными в ряд ячейками, что-то вроде этого:

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

Наиболее важным аспектом является то, что указанные два (<-) внутренние горизонтальные линии должны быть идеальными по пикселям в столбцах.Я не могу позволить, чтобы содержимое каких-либо ячеек влияло на правильность их расположения.Я обнаружил, что когда я пытаюсь сделать это, используя таблицу HTML с применением colspans к соответствующим ячейкам, браузеры делают что-то странное.Вместо того чтобы визуализировать смещенные ячейки с несколькими столбцами, они сжимают строку (<<<), чтобы устранить смещение. </p>

Я свел проблему к следующей таблице:

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

, что должно быть возможно с использованием разметки, подобной этой:

<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,даже когда я использовал «переполнение: скрытый».(Похоже, есть и ошибки, когда приходит время печатать страницу, изложенную таким образом - элементы div вылетают из макета злонамеренно.) Мне нужно, чтобы макет имел приоритет над отображением всего содержимого.

Answer 1

Попробуйте это. Не все так хорошо, но работает.

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