HTML表格合并TD后内容排版问题：如何实现内容对齐且不粘连

要实现合并TD后内容不粘连、保留间距并和上方表格列对齐，核心是让合并单元格内的内容对应原表格的列布局，以下是两种实用方案：

方案一：CSS Grid 精准对齐原列（推荐） #

利用CSS Grid在合并的TD内部模拟原表格的三列结构，能完美匹配上方列的宽度和位置：

修改后的HTML代码 #

<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
  <thead>
    <tr>
      <th>No</th>
      <th>Nama Peserta</th>
      <th>Alamat</th>
      <th>Simpanan</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
    <td>350.000</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Andi Suryono</td>
      <td>Jl. Kemerdekaan No.17</td>
    <td>50.000</td>
    </tr>
    <tr>
      <td>2.</td>
      <td colspan="3" class="merged-cell">
        <span class="cell-item">Susi Handayani</span>
        <span class="cell-item">Jl. Kebangsaan No.225</span>
        <span class="cell-item">300.000</span>
      </td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Roy Pratama</td>
        <td>Jl. Merdeka No.32</td>
      <td>1.000.000</td>
      </tr>
    <tr>
      <td>4.</td>
      <td>Tia Suryani</td>
      <td>Jl. Jelajah No.111</td>
    <td>1.555.000</td>
    </tr>
  </tbody>
</table>

对应的CSS代码 #

/* 基础表格样式，辅助对齐和美观 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* 合并单元格的Grid布局 */
.merged-cell {
  display: grid;
  /* 三列宽度对应原表格的Nama、Alamat、Simpanan列，可根据实际调整百分比 */
  grid-template-columns: 30% 40% 30%;
  gap: 10px; /* 内容之间的间距 */
}

.cell-item {
  display: block; /* 确保每个内容占满对应列宽 */
}

如果你的浏览器支持subgrid（现代主流浏览器已支持），可以替换grid-template-columns为subgrid，自动继承父表格的列宽，无需手动计算百分比：

.merged-cell {
  display: grid;
  grid-column: 2 / span 3; /* 对应原表格第2到第4列 */
  grid-template-columns: subgrid;
  gap: 10px;
}

方案二：内联元素加间距（快速实现） #

如果不需要严格对齐原列，仅需避免内容粘连，可直接给内容块添加边距：

修改后的HTML代码 #

<tr>
  <td>2.</td>
  <td colspan="3">
    <span style="margin-right: 20px;">Susi Handayani</span>
    <span style="margin-right: 20px;">Jl. Kebangsaan No.225</span>
    <span>300.000</span>
  </td>
</tr>

这种方法操作简单，但无法保证和上方列精准对齐，适合临时快速解决。

注意事项 #

• 废弃的align等HTML属性无需使用，全部用CSS控制样式；
• border-collapse: collapse能让表格边框更整洁，也有助于列宽的稳定计算；
• 若表格列宽为固定值，直接在Grid布局中设置对应固定宽度即可。

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