表般的佈局，彌補多行跨度細胞 - 瀏覽器崩潰的行

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任何高度和寬度的限制，即使我用「溢出：隱藏」。 （當打印這樣排版的頁面時，似乎也有一些小問題 - divs會以惡意方式從佈局中飛出）。我需要佈局優先於顯示所有內容。

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