6

我想我正在尝试做的这个模式将比问题本身更具描述性。

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

如您所见，我正在尝试创建一个 2 列的表，在该表中，它应该能够跨行其中一列，并最终跨越接下来的 2 行。

我是否错过了一些明显的方法，或者一些高级表格标签/属性？还是没有办法使用表格来做到这一点？

我知道可以使用其他方式来实现这一点，但表格是我感兴趣的，问题是什么。

供参考：有些事情我已经尝试过但没有成功 http://jsfiddle.net/dbtYk/

4

2 回答 2

6

除非我错过了什么，这是一个基于你的 jsfiddle的例子

<table>
    <tr style="height:20px;">
        <td rowspan="2">left</td>   
        <td>right</td>
    </tr>
    <tr style="height:20px;">
        <td rowspan="2">right</td>   
    </tr>
    <tr style="height:20px;">
        <td rowspan="2">left</td>   
    </tr>
    <tr style="height:20px;">
        <td>right</td>   
    </tr>
    <tr>
        <td>left</td>   
        <td>right</td>   
    </tr>
</table>

更新

正如 Cicada 所指出的，不幸的是，上述内容在 Chrome 中不起作用。

更新 2

正如 Alohci 所指出的，添加高度可以使其在 Chrome 中工作。上面已经修改以反映这一点，以及一个新的 jsfiddle。

于 2012-06-11T11:58:51.003 回答
0

当然这是可能的:-)

<table border="yes">
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

只需跳过前一行中已被跨单元格覆盖的单元格。

于 2012-06-11T12:00:57.277 回答