嘿，我太懂你这种手动写表格合并单元格时遇到行丢失的崩溃了——用colspan和rowspan的时候，稍不注意就会因为表格结构错乱导致行“消失”，核心问题大多是重复定义了被合并覆盖的单元格，或者没算准每一行的单元格跨度总和。

结合你的需求：合并所有3个“5”单元格、合并所有“1”单元格、像左上角“4”那样合并所有“6”单元格，我给你整理了一个修正后的代码示例，同时拆解关键注意点：

修正后的完整代码示例 #

<div class="table-body">
  <div class="row">
    <div class="col-md-2"></div>
    <table class="col-md-8 table table-bordered">
      <tbody>
        <!-- 第一行：4跨5行4列，第一个5跨3列，1跨3行1列 -->
        <tr>
          <td colspan="4" rowspan="5">4</td>
          <td colspan="3">5</td>
          <td rowspan="3">1</td>
        </tr>
        <!-- 第二行：仅第二个5，因为4和1仍在跨行，对应位置已被覆盖 -->
        <tr>
          <td colspan="3">5</td>
        </tr>
        <!-- 第三行：仅第三个5 -->
        <tr>
          <td colspan="3">5</td>
        </tr>
        <!-- 第四行：6跨2行4列（覆盖原5和1的列区域） -->
        <tr>
          <td colspan="4" rowspan="2">6</td>
        </tr>
        <!-- 第五行：无单元格，因为4和6已经跨行覆盖到这里 -->
        <tr></tr>
      </tbody>
    </table>
  </div>
</div>

关键注意事项 #

• 固定总列数，算准跨度总和：先确定表格的总列数（示例中是4+3+1=8），每一行的所有单元格colspan之和必须等于这个数，否则表格结构会错乱。
• 不要重复写被合并的单元格：比如第一行的1用rowspan="3"跨了3行，那第二、第三行就不能再写对应位置的单元格，否则会导致表格偏移，看起来像行“丢了”。
• 覆盖行可以留空<tr>：如果某一行完全被前面的跨行单元格覆盖，只需要保留空的<tr>标签，就能保证表格的行数不会丢失。

你可以根据自己实际的表格列数调整colspan和rowspan的数值，核心就是保持结构的一致性~

内容的提问来源于stack exchange，提问作者Ethan