background-attachment: fixed 在 table 元素上无效，因规范限制其仅对建立包含块的元素生效；可靠方案是用 position: relative 的父容器配合 ::before 伪元素实现固定背景。
background-attachment: fixed 在 table 元素上根本不起作用
直接给 <table> 或其父容器（如 <div> 包裹表）设置 background-attachment: fixed，浏览器会静默忽略——这不是 bug，而是规范限制：background-attachment 只对「建立包含块」的元素生效，而 <table> 默认不创建新的包含块，且多数浏览器（尤其是 Safari 和 Chrome）根本不支持在表格或表格单元格上启用 fixed 背景。
为什么 table 滚动时背景总跟着动
常见现象是：表格内容纵向溢出、容器设了 overflow-y: auto，但背景图随内容一起滚动。原因有三：
-
<table>本身不能作为fixed的锚定上下文，背景始终绑定在其最近的「可滚动祖先」（通常是包裹它的<div>）上 - 只要该祖先设置了
transform、will-change或overflow，fixed就被降级为scroll - iOS Safari 对所有非
body元素的background-attachment: fixed全面禁用，哪怕你写在<div class="table-wrapper">上也无效
真正能用的方案：用伪元素覆盖 table 容器
把固定背景从 table 移到它的直接父容器（比如 <div class="table-container">），再用 ::before 实现视觉固定：
必须满足以下条件才稳定：
立即学习“前端免费学习笔记（深入）”；
-
.table-container要设position: relative且显式高度（如height: 400px），否则fixed伪元素无法锚定 -
.table-container::before必须用position: fixed+top/left+width/height百分比，不能用vw/vh（iOS 横屏时漏边） -
z-index: -1确保不遮挡表格，pointer-events: none防止拦截点击和滚动 -
background-size: cover和background-position: center center必须显式声明，否则拉伸错位
最小可用 CSS：
`.table-container {
position: relative;
height: 400px;
overflow-y: auto;
}
.table-container::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}`
表格内部单元格需要局部固定背景？别试了
<td> 或 <th> 上加 background-attachment: fixed 是无效的，浏览器会直接当 scroll 处理。如果真要某列“背景不动”，唯一可行的是：
- 把该列抽成独立
<div>层，用position: sticky+left: 0锁定位置（注意：sticky 依赖父容器overflow和高度约束） - 背景图改用
<img>标签 +position: fixed+z-index层叠，手动定位到对应列区域（需 JS 监听 scroll 动态修正left值） - 放弃 CSS 方案，用 Canvas 绘制背景并监听
scroll事件重绘——仅限极端需求
伪元素方案看似绕路，但它是目前唯一能在 iOS 17+、Chrome 120+、Edge 115+ 全平台稳定运行的方式；任何试图在 <table> 结构内硬套 fixed 的写法，都会在某个设备或版本上突然失效。
