如何仅用CSS实现购物车表格中单元格跨两行合并？

由于你无法调整现有HTML结构（交换空单元格和Delete单元格的位置），原生表格的rowspan属性依赖HTML结构实现语义化跨行，仅靠CSS无法直接修改表格的结构跨行，但可以通过视觉模拟的方式实现类似效果：

实现思路 #

利用CSS绝对定位，将第二行的Delete单元格向上偏移，覆盖第一行的空白单元格，同时调整相关元素的布局避免内容重叠，达到视觉上的跨行效果。

完整代码示例 #

table {
  position: relative;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}
/* 固定列宽，保证定位精准（可根据需求调整） */
td:nth-child(1), td:nth-child(4) {
  width: 100px;
}
td:nth-child(2) {
  width: calc(100% - 320px);
}
td:nth-child(3) {
  width: 120px;
}

/* 定位Delete单元格，覆盖两行区域 */
tr:nth-child(2) td:nth-child(3) {
  position: absolute;
  top: 0;
  /* 计算两行的总高度，包含padding和边框 */
  height: calc(100% + 36px);
  /* 定位到第三列的起始位置 */
  left: calc(100px + calc(100% - 320px));
}
/* 隐藏第一行的空白单元格 */
tr:nth-child(1) td:nth-child(3) {
  visibility: hidden;
}
/* 给Description列设置右侧内边距，避免和Delete内容重叠 */
tr:nth-child(2) td:nth-child(2) {
  padding-right: 130px;
}

<table>
<tr>
<td rowspan="2">Image</td>
<td>Title</td>
<td></td>
<td rowspan="2">Price</td>
</tr>

<tr>
<td>Description</td>
<td>Delete</td>
</tr>
</table>

注意事项 #

1. 这是视觉模拟，并非真正的表格结构跨行，屏幕阅读器等辅助设备可能无法正确识别跨行语义；
2. 定位的数值（如height、left、padding-right）需要根据实际的单元格内边距、边框宽度调整，确保布局适配；
3. 如果表格列宽是动态的，这种方法的兼容性会下降，此时更推荐调整HTML结构或使用JavaScript实现语义化跨行。

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