我需要設(shè)計(jì)一個(gè)表格，或者類似的東西，帶有偏移的跨行單元格，就像這樣:

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

最重要的方面是這兩個(gè)表示(& lt-)跨列的內(nèi)部水平線必須像素完美。我不能讓任何單元格的內(nèi)容影響這些單元格是否對齊。我發(fā)現(xiàn)，當(dāng)我嘗試使用表格HTML來實(shí)現(xiàn)這一點(diǎn)，并將colspans應(yīng)用于適當(dāng)?shù)膯卧駮r(shí)，瀏覽器會(huì)做一些奇怪的事情。它們不是呈現(xiàn)偏移的多列單元格，而是折疊一行(& lt& lt& lt)來消除偏移。

我把這個(gè)問題歸結(jié)為以下幾種類型的表格:

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

使用這樣的標(biāo)記應(yīng)該是可能的:

<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呈現(xiàn)如下:

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

瀏覽器折疊第二行。

為什么會(huì)這樣？我如何解決這個(gè)問題，以實(shí)現(xiàn)我需要的布局？

我嘗試用div布局做這件事，結(jié)果令人失望，因?yàn)閱卧駜?nèi)容可以覆蓋我使用CSS應(yīng)用的任何高度和寬度約束，即使我使用了“overflow:hidden”。(當(dāng)打印這種布局的頁面時(shí)，似乎也有陷阱——div惡意地飛出頁面。)我需要布局優(yōu)先于顯示所有內(nèi)容。

試試這個(gè)。雖然沒有那么好，但是很有效。

超文本標(biāo)記語言

<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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

*
{
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
}

小提琴