HTML表格行单元格合并：如何将x、y所在行合并为单个xy单元格

实现方法 #

要完成单元格横向合并，使用HTML表格原生的colspan属性即可，具体修改逻辑：

• 找到原代码中包含x、y内容的2个<tr>行，每行删除原有第二个<td>元素
• 给每行剩余的唯一<td>添加colspan="2"属性，指定该单元格横跨2列
• 将<td>的内容修改为xy，可移除原有width: 50%的样式适配整行宽度

修改后的完整代码如下：

<div style="text-align: center; color: #345; padding-top: 10px;">
  <table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
    <tbody>
      <tr style="height: 126px;">
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
      </tr>
      <tr style="height: 18px;">
        <td colspan="2" style="height: 18px;">xy</td>
      </tr>
      <tr style="height: 108px;">
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
      </tr>
      <tr style="height: 18px;">
        <td colspan="2" style="height: 18px;">xy</td>
      </tr>
    </tbody>
  </table>
  <p>&nbsp;</p>
</div>

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