如何给斑马纹表格行添加1cm间距？附示例代码及演示链接

嘿，我来帮你搞定这个表格行间距的问题！你现在的斑马纹样式已经没问题了，但直接给tr加margin是行不通的——因为表格行元素（table-row）默认不支持margin属性，得用表格特有的方法来实现行与行之间的1cm间距。

这里有两种可靠的方法，你可以根据需求选择：

方法一：使用表格的border-spacing属性（推荐） #

这是最符合表格布局规范的方法，只需要修改table的样式：

table {
  width: 100%;
  border-collapse: separate; /* 必须把默认的合并边框改成分离模式 */
  border-spacing: 0 1cm; /* 第一个值是列间距（设为0保持列对齐），第二个值是行间距（1cm） */
}
tr:nth-child(odd) { background: #4286f4; }
tr:nth-child(even) { background: #f49541; }

原理：border-spacing是表格专属属性，只有当border-collapse设为separate时才生效，它可以精确控制行和列之间的间距，不会破坏表格的列布局。

方法二：通过伪元素模拟行间距（适合需要保留边框合并的场景） #

如果你必须保持border-collapse: collapse（比如需要单元格边框合并），可以用伪元素在每行后面添加一个空白区域：

table {
  width: 100%;
  border-collapse: collapse; /* 保留边框合并 */
}
tr {
  position: relative; /* 让伪元素定位相对于行 */
}
/* 给除了最后一行的所有行添加底部空白 */
tr:not(:last-child):after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1cm;
  height: 1cm;
  background: #ffffff; /* 设置成页面背景色，模拟间距效果 */
}
tr:nth-child(odd) { background: #4286f4; }
tr:nth-child(even) { background: #f49541; }

注意：这种方法需要确保页面背景色和伪元素的背景色一致，否则会露出不协调的颜色。

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