html - rowspan 在第二行上未按预期工作

Question

为什么顶部的“1 2 3”与底部的“1 2 3”不对齐？

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td rowspan="3">⟶</td>
    <td>b</td>
    <td rowspan="3">⟶</td>
    <td>c</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 1

所有行都需要具有相同数量的单元格，或者如果使用行跨度，则这些行必须与常规(非行跨度)单元格的数量相加。 你的第一行有 3 个单元格，第二行有 6 个单元格。这是行不通的。如果您在第一行插入这些跨行单元格(就像我对下面的代码片段的改编)，它将起作用。

td { border: 1px solid #ddd; }

<table>
  <tr>
    <td>1</td>
    <td rowspan="3">⟶</td>
    <td>2</td>
    <td rowspan="3">⟶</td>
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>