Question

尝试在表格中获取一个单元格，该单元格将跨越两行和两列。

实现了这个目标：

<table border="1">
    <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr>
        <td colspan='2' rowspan="3">R2C1, R3C1</td>
    </tr>
    <tr>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
</table>

JSfiddle - http://jsfiddle.net/UmLqw/36/

有没有办法摆脱R2右边的那两个单元？

UPD2

好的，似乎有点复杂。

http://www.volleymsk.ru/ap/addons?section=Promotion

这就是我正在做的事。

Answer 1

您有3rd和4th第3行表格单元格，其他只有两个。在这种情况下，当你在所有单元格上都有rowspan时，没有理由在第二行使用colspan。

<table border="1">
    <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr>
        <td colspan='2'>R2C1, R3C1</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
</table>

http://jsfiddle.net/UmLqw/38/

Answer 2

你实际上并没有想要获得两行，你只想让一行更大。行跨度的想法是它跨越某些列而不是所有列。

你可以通过简单的造型实现你想要的东西：

<table border="1">
        <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr style="height:30px">
        <td colspan='2'>R2C1,R3C1</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
        </table>

编辑：使用列来计算行数，以便您可以使用rowspan：

<table border="1">
        <tr>
            <td>1</td>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr >
        <td >2</td>
        <td colspan='2'rowspan='2' >R2C1,R3C1</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td >R4C1</td>
        <td >R4C2</td>
    </tr>
        </table>

Answer 3

如果您将代码提交给像http://validator.w3.org/nu/这样的HTML5验证程序，它会告诉您（以某种技术方式）标记违反了HTML表格模型。您无法定义没有单元格开始的行。您可以根据需要设置行的高度，而不是将一行设为两行。

目前还不清楚你真正想要什么，但在你的第二个jsfiddle的基础上，你似乎真的需要一个表而不是两个表：

<table border cellspacing=0>
  <tr><td>R1C1 <td>R2C2 <td>R1C1 <td>R2C2
  <tr><td rowspan=2 colspan=2>R2C1, R3C1 <td colspan=2>R2C1
  <tr>                                   <td colspan=2>R3C1
  <tr><td>R4C1 <td>R4C2 <td>R4C1 <td>R4C2
</table>

Rowspan + colspan整行

3 个答案: