Question

我需要使用偏移的行跨越单元布置一个表或类似的东西，如下所示：

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

最重要的方面是两个指示的（＆ - ）内部水平线必须在列之间是像素完美的。我不能让任何细胞的内容影响这些是否排列正确。我发现当我尝试使用表格HTML完成此操作时，将colspans应用于适当的单元格，浏览器会做一些奇怪的事情。它们不是渲染偏移的多列单元，而是折叠一行（＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;

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

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

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

<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应用的任何高度和宽度限制，即使我使用了溢出：隐藏＆＃39;。（当打印这样的页面时，似乎还有一些问题 - 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

具有偏移多行跨度单元格的表格式布局 - 浏览器会折叠一行

1 个答案: