添加带绝对定位::after伪元素的表格行时边框偏移如何解决

问题原因 #

表格行<tr>的默认display类型为table-row，CSS规范中并未明确定义该类型元素设置position: relative的行为，绝大多数浏览器对此属性不生效。你设置的绝对定位伪元素实际并未被tr约束定位，首次生成伪元素时，其定位参考的是上层元素/视口，超出表格范围的尺寸触发了表格布局重算，最终表现为边框偏移。

解决方案 #

给tr添加无视觉影响的transform属性强制创建层叠上下文，让伪元素的定位参考锚定到当前tr，同时把百分比定位改成固定像素值避免布局抖动：

/* 仅修改对应部分的样式即可 */
tr:nth-child(n + 3) {
  position: relative;
  /* 新增属性，强制创建层叠上下文，让relative规则生效，不会改变原有布局和视觉效果 */
  transform: scale(1);
}

tr:nth-child(n + 3)::after {
  color: #f00;
  content: '×';
  font-weight: bold;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 30%;
  /* 替换百分比为固定像素，定位更稳定，可根据需要调整数值 */
  right: -15px;
}

如果担心transform属性的兼容性，也可以换实现思路：把删除叉的伪元素挂载到每行最后一个<td>上，给最后一个td设置position: relative，也能达到同样效果，不会触发表格布局偏移。

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