如何取消表格中特定单元格的border-spacing垂直间距？

首先得说清楚：border-spacing是table元素专属的属性，你给单个<tr>设置border-collapse或者border-spacing是完全无效的——这也是你之前尝试没效果的原因。要只取消某两个行之间的16px垂直间距，我们得用点小技巧来抵消这个间距：

最稳妥的方案：用CSS Transform偏移行 #

这个方法不会破坏表格的布局结构，只做视觉上的偏移，非常适合你的场景：

1. 先给需要取消间距的那个<tr>加一个自定义类，比如no-top-spacing
2. 给这个类加CSS样式，把行向上偏移16px，刚好抵消掉border-spacing的垂直间距

修改后的完整代码示例：

<style>
  tr.no-top-spacing {
    transform: translateY(-16px);
  }
</style>

<table width="100%" style="text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-collapse: separate; border-spacing: 0 16px;">
  <tr style="background-image: url(Pics/background.jpg);">
    <td> Some text </td>
  </tr>
  <!-- 此处不需要间距 -->
  <tr class="no-top-spacing">
    <td> 你要放的内容 </td>
  </tr>
  <!-- 其他行依然保持16px间距 -->
  <tr>
    <td> 其他内容 </td>
  </tr>
</table>

备选方案：修改display属性加负margin（谨慎使用） #

如果transform的方法不符合你的需求（比如涉及到动画或者布局计算），可以尝试把<tr>的display改成block，然后用负margin抵消间距，但要注意：这个方法可能会破坏表格的列对齐（因为table-row是专门为表格布局设计的），适合列结构简单的场景：

tr.no-top-spacing {
  display: block;
  margin-top: -16px;
}

为什么你之前的尝试没用？ #

再强调一次：border-collapse和border-spacing是只有table元素才能识别的CSS属性，给<tr>、<td>设置这些属性完全不会生效，所以你之前写的<tr style="border-collapse: collapse; border-spac...是无效的哦。

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