如何通过repeating-linear-gradient()移动背景，实现表格跨列条纹效果？

嘿，完全懂你的痛点——靠硬调单元格尺寸、条纹宽度和角度来凑对齐，不仅麻烦还容易出问题，稍微改个布局就崩了。其实咱们换个思路：让所有条纹单元格共享同一个背景坐标系，就能轻松实现像#t2那样的跨列对齐效果，核心是通过background-position来“移动”背景，而不是改条纹本身。

核心实现思路 #

我们要让每个条纹单元格的背景，都从表格的同一个起始点开始绘制，然后根据单元格所在的列，调整背景的显示位置，这样条纹自然就会跨列对齐了。

具体代码示例 #

假设你的表格结构是这样的：

<table id="t1">
  <tr>
    <td class="striped">单元格1</td>
    <td class="striped">单元格2</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td class="striped">单元格3</td>
    <td class="striped">单元格4</td>
  </tr>
</table>

对应的CSS写法：

#t1 {
  /* 固定表格布局，让列宽稳定，对齐更精准 */
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

#t1 td {
  padding: 1rem;
  border: 1px solid #ccc;
}

#t1 .striped {
  /* 定义你的条纹样式，这里用45度斜纹做例子 */
  background-image: repeating-linear-gradient(
    45deg,
    #f0f0f0 0px,
    #f0f0f0 12px,
    transparent 12px,
    transparent 24px
  );
  /* 关键：让背景的定位参考系是表格内容框，而非单个单元格 */
  background-origin: content-box;
}

/* 根据单元格所在列，调整背景位置 */
#t1 .striped:nth-child(1) {
  background-position: 0 0;
}
#t1 .striped:nth-child(2) {
  background-position: 100% 0;
}
#t1 .striped:nth-child(3) {
  background-position: 200% 0;
}

为什么这个方法有效？ #

每个.striped单元格的背景其实是同一个完整的条纹图案，我们通过background-position让第一列的单元格显示图案的0%位置，第二列显示100%位置（也就是图案向右平移了整个单元格宽度的距离），第三列显示200%位置……这样所有条纹就会完美对齐，看起来像是跨整列绘制的。

进阶优化：用CSS变量简化代码 #

如果你的表格列数多，手动写nth-child太麻烦，可以用CSS变量动态传递列索引：

<td class="striped" style="--col-index: 0">单元格1</td>
<td class="striped" style="--col-index: 1">单元格2</td>
<td class="striped" style="--col-index: 2">单元格3</td>

然后CSS改成：

#t1 .striped {
  /* ... 其他样式不变 ... */
  background-position: calc(var(--col-index) * 100%) 0;
}

这样不管多少列，只要给单元格设置对应的--col-index变量就行，维护起来更方便。

注意事项 #

1. 确保表格用border-collapse: collapse，避免单元格之间的间隙打断条纹；
2. 如果需要自适应列宽，可以去掉table-layout: fixed，但条纹对齐的精度依然不受影响；
3. 条纹的角度、宽度可以随便调整，这个方法都适用——因为我们只是移动背景的位置，不是修改条纹本身。

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