求助：如何通过CSS在每个tr标签后添加行间距？

我明白你想让表格的每一行之间都有明显的空白间隔，之前尝试CSS没成功很正常——因为表格行（<tr>）属于表格布局模型，普通的margin属性对它是不起作用的，这是很多人都会踩的小坑！

下面给你几个靠谱的解决方案，你可以根据自己的需求选择：

方法1：用border-spacing（最推荐） #

这是表格布局里专门用来控制单元格/行间距的属性，需要配合border-collapse: separate一起使用：

/* 给表格设置核心样式 */
table {
  border-collapse: separate; /* 必须设为separate，border-spacing才会生效 */
  border-spacing: 0 12px; /* 第一个值是列之间的水平间距，第二个是行之间的垂直间距，按需调整数值 */
}

这个方法完全符合表格的原生布局逻辑，不会破坏表格结构，效果就是行与行之间出现均匀的空白间隙，和你截图里的需求匹配度最高。

方法2：用透明边框模拟间隙 #

如果你的表格需要保持border-collapse: collapse（比如单元格边框要合并显示），可以给每行添加透明的底部边框来模拟间隙：

table {
  border-collapse: collapse;
}
table tr {
  border-bottom: 10px solid transparent; /* 透明边框的高度就是行间隙的大小 */
}

注意：如果表格所在容器有背景色，也可以把边框颜色设为和容器背景色一致，视觉效果会更自然。

方法3：给单元格加垂直内边距（备选） #

如果上面两种方法都不适用，也可以给每行的单元格（<td>/<th>）添加底部内边距，虽然本质是单元格内部留白，但视觉上也能达到类似行间隙的效果：

table td, table th {
  padding-bottom: 10px;
}

最后提醒一下：如果新写的CSS没生效，检查一下是不是选择器优先级不够（比如原来的表格样式用了更具体的选择器），可以尝试把选择器写得更精准（比如给表格加个类.data-table，然后用.data-table tr），或者临时加!important排查问题（不推荐长期使用，优先调整选择器优先级）。

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