如何让表格行的::after伪元素相对该行定位？

嘿，Brian！你碰到的这个问题其实是表格元素渲染规则的一个坑——<tr>作为table-row类型的元素，设置position: relative并不会让它成为伪元素的定位上下文，因为表格的盒模型和普通块级元素完全不一样，伪元素会跳过tr，直接找最近的定位容器（也就是你的.beat-store表格）。

下面给你几个实用的解决方案，顺便分享点表格使用的小技巧：

方案1：用表格单元格(td)承载伪元素 #

既然tr搞不定，我们换个思路，把渐变线的伪元素放在每行的最后一个td里，利用td的定位上下文来实现跨列的分隔线：

.beat-store { 
  position: relative; 
  display: table; 
  width: 100%; 
  border-spacing: 0; 
  border-collapse: collapse; 
  border-radius: 8px; 
}
.beat-store__song { 
  display: table-row; 
  height: 6rem; 
}
/* 给每行最后一个td加伪元素，实现从专辑图右侧开始的渐变线 */
.beat-store__song:not(:last-child) .beat-store__actions::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6rem; /* 和你原来的calc(100% - 6rem)对应，刚好避开专辑图区域 */
  right: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(204, 204, 204, 0), #cccccc, rgba(204, 204, 204, 0));
  z-index: 10;
}
/* 给所有td设置relative，让伪元素以行的底部为基准 */
.beat-store__table-cell {
  position: relative;
  vertical-align: middle;
}

这个方案不需要改动你的HTML结构，直接在现有基础上调整CSS就能实现需求。

方案2：用Flex/Grid模拟表格布局（更灵活） #

如果你的页面不是纯数据展示，其实可以放弃原生表格，用Flex或Grid来模拟表格布局——这样块级元素的定位规则完全正常，tr的替代元素设置position: relative后，伪元素会乖乖跟着它走：

.beat-store {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.beat-store__song {
  display: flex;
  align-items: center;
  height: 6rem;
  position: relative; /* 这里的relative终于生效了！ */
}
.beat-store__song:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6rem;
  right: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(204, 204, 204, 0), #cccccc, rgba(204, 204, 204, 0));
  z-index: 10;
}
/* 给每个"单元格"设置宽度，模拟表格列 */
.beat-store__album-art-box {
  flex: 0 0 6rem; /* 固定宽度，对应原来的专辑图列 */
}
.beat-store__song-details {
  flex: 1; /* 自动填充剩余空间 */
}
.beat-store__song-bpm, .beat-store__song-time {
  flex: 0 0 80px; /* 固定宽度的小列 */
}
.beat-store__actions {
  flex: 0 0 180px; /* 操作列宽度 */
}

这种方式完全摆脱了表格的渲染限制，后续调整布局也会更自由。

表格使用小建议 #

1. 非数据场景别用原生表格：表格的渲染规则有很多特殊限制（比如tr/td的伪元素、定位支持差），如果只是做布局，Flex/Grid是更好的选择。
2. 表格内定位优先用td：如果必须用表格，所有需要定位的元素（包括伪元素）都放在td内部，td的position: relative是可以正常生效的。
3. 简单渐变边框用border-image：如果不需要精准控制渐变线的起始位置，直接给td加border-bottom配合border-image更简单：

   .beat-store {
     border-collapse: separate; /* 必须关闭边框合并，border-image才生效 */
     border-spacing: 0;
   }
   .beat-store__song:not(:last-child) td {
     border-bottom: 1px solid transparent;
     border-image: linear-gradient(to right, rgba(204,204,204,0), #ccc, rgba(204,204,204,0)) 1;
   }
   

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