直接给<table>加background-image: linear-gradient()常失效，因<tr>无独立盒模型、<td>覆盖父背景、border-collapse收缩绘制区域；安全方案是用外层div包裹并设渐变，表格设transparent背景。
表格本身不支持直接用 background 简写加 linear-gradient() 安全生效——多数浏览器会把渐变当作图像处理，而 <table> 默认是 `border-collapse: collapse`，且内部 <tr>、<td> 会覆盖或裁剪父级背景。真想加，得绕开默认渲染逻辑。
为什么直接给 <table> 加 background-image: linear-gradient() 常常失效
表格元素的盒模型特殊：<tr> 没有独立盒（display: table-row 不生成块级上下文），<td> 会继承或重绘背景，导致渐变被截断、重复、甚至完全不可见。更麻烦的是，background-attachment: scroll 在表格里行为不一致，Safari 和旧版 Chrome 可能直接忽略。
-
<table>上设background-image，但没设background-repeat: no-repeat→ 渐变被平铺成条纹 -
<tr>或<td>有默认背景色（如 white）→ 直接盖掉父级渐变 - 用了
border-collapse: collapse→ 单元格边框合并，背景绘制区域进一步收缩
安全做法：用包裹容器 + background-image + overflow: hidden
不碰表格自身背景，改用外层 <div> 包裹整个 <table>，把渐变加在容器上，再用定位和裁剪确保视觉连贯。
- 给包裹
<div>设position: relative和overflow: hidden -
background-image: linear-gradient(to bottom right, #4facfe, #00f2fe)写在该<div>上 -
<table>设background-color: transparent，并移除所有可能遮挡的background - 必要时加
min-height: 100px或padding防止容器塌陷（空表格高度为 0）
示例：
立即学习“前端免费学习笔记（深入）”；
div.table-container {
position: relative;
overflow: hidden;
background-image: linear-gradient(135deg, #6a11cb, #2575fc);
min-height: 200px;
}
div.table-container table {
background-color: transparent;
border-collapse: separate;
}
想让每行带独立渐变？用 <tr> 的 background-image 但必须配 background-size
可行，但只推荐用于单色过渡或浅淡效果。因为每行单独渲染渐变，角度稍不对齐就会出现“错层感”。
-
<tr>必须设display: table-row（默认就是，但某些 reset CSS 会改） - 渐变方向建议用角度（如
90deg），避免to right在不同行宽下起点偏移 - 加
background-size: 100% 100%或cover，否则小行高下渐变被压缩失真 - 务必设
background-color: transparent，否则渐变被底色吞掉
错误示范：tr { background: linear-gradient(to right, red, blue); } → Safari 可能退化为纯红
正确写法：tr { background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4); background-size: cover; background-color: transparent; }
移动端表格渐变要避开 background-attachment: fixed
哪怕你只是想让渐变随滚动“固定”，也别在表格或其容器上加 background-attachment: fixed。iOS Safari（尤其 iOS 16.4 之前）遇到表格 + 渐变 + fixed 组合，大概率触发 WebKit 渲染管线崩溃：滚动卡顿、背景撕裂、整块白屏。
- 替代方案一：去掉
fixed，用transform: translateZ(0)强制硬件加速，再 JS 监听 scroll 调整background-position - 替代方案二：放弃视差，改用纯 CSS 动画驱动
background-position循环移动（轻量、稳定） - 真机调试前，必须连 iPhone Safari 开发者工具看实时表现——模拟器根本复现不了这个 bug
最常被忽略的一点：表格渐变不是“加个 background 就完事”，而是要主动管理渲染层级、盒模型边界和 fallback 行为。哪怕语法全对，盒子塌陷或背景覆盖也会让你以为代码失效。
