Question

我正在尝试合并单元格1 + 2 + 3

我已经使用当前代码完成了此操作

<td rowspan="2" colspan="2"> &nbsp;1</td>

然后我将第二行留为空白。

 <tr>  </tr>

以某种方式失败，它也删除了一行，因为总共应该有7条。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<table width="100%" border="1">
  <tbody>
    <tr>
      <td rowspan="4" colspan="2">&nbsp;</td>
      <td rowspan="2" colspan="2"> &nbsp;1</td>
    </tr>
    <tr>  </tr>

    <tr>
      <td>&nbsp;2</td>
      <td>&nbsp;3</td>

    </tr>
    <tr>

      <td>&nbsp;</td>
      <td>&nbsp;</td>

    </tr>
    <tr>
      <td colspan="2">&nbsp;Name</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;Age</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;Cost</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<body>
</body>
</html>

Answer 1

rowspan就是这样，如果您看这段代码，它的结构与您的代码相同，只有我合并了1,2,3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
    table, th, td {
    border: 1px solid black;
}
</style>
<body>
    <table width="100%">
        <tr>
            <td rowspan="3">
                big
            </td>
            <td colspan="2" rowspan="2" >
                1
            </td>

        </tr>
        <tr>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>4</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>

        </tr>
    </table>
</body>
</html>

一旦我进行了行跨，1,2,3就会合并成看起来像是单行的东西，尽管实际上是两行。

这是另一个示例。我的行距与第一个示例完全相同，只是在右侧（x）处添加了另一列。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
    table, th, td {
    border: 1px solid black;
}
</style>
<body>
    <table width="100%">
        <tr>
            <td rowspan="3">
                big
            </td>
            <td colspan="2" rowspan="2">
                1
            </td>
            <td>x</td>
        </tr>
        <tr>
                <td>x</td>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>4</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>x</td>
        </tr>
    </table>
</body>
</html>

现在，表看起来与您期望的完全一样，但这仅是因为“ x”列将其保持在一起。没有“ x”列，表将失去所需的外观，尽管它正是您想要的样子。例如，如果您将第一个示例中的Height =“ 50px”添加到第二个<td>

<td colspan="2" rowspan="2" Height="50px">
   1
</td>

这将使您的表看起来完全符合您的预期。

或者您可以像在第二个示例中一样添加另一列，然后将其隐藏。

不可能的桌子！多个合并未正确显示

1 个答案: