mask-image在table元素上基本无效，因表格display值不支持遮罩；须用block容器包裹table并设置mask-image（含-webkit前缀）及linear-gradient（仅black/transparent），同时确保容器高度足够且无overflow:hidden冲突。
mask-image 在 table 元素上基本无效
直接对 <table>、<tr> 或 <td> 设置 mask-image 几乎不会生效 —— 因为表格元素默认是 display: table / table-row / table-cell，而这些 display 值不支持 mask（CSS Masking 规范明确要求被遮罩元素必须是“可绘制的块级容器”，且不能是 table 盒模型）。浏览器会静默忽略该样式。
可行方案：用 wrapper div 包裹 table 并应用 mask-image
真正起作用的方式是把 <table> 放进一个普通块级容器（如 <div>），对该容器设置 mask-image。注意以下关键点：
- 包裹
<div>必须设display: block（默认就是）且不能有overflow: hidden冲突（mask 依赖 overflow visible 才能正确合成） -
mask-image推荐用linear-gradient，例如mask-image: linear-gradient(to bottom, black 0%, transparent 100%) - 必须同时设置
-webkit-mask-image以兼容 Safari（目前 Safari 仍不支持无前缀的mask-image） - mask 默认作用于整个盒区域，若想只遮罩表格内容区（比如底部渐隐），需确保 wrapper 高度足够、table 不撑高容器
```html <div style=" -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); "> <table>...</table> </div> ```
常见失效原因和调试技巧
即使用了 wrapper，效果仍不出现？大概率是这几个问题：
-
mask-image的渐变颜色写成white/black/transparent混用 —— 必须全用black和transparent（alpha 通道才有效），white在 mask 中等价于完全不遮罩，容易误判 - wrapper
height被限制（如设了固定 height 或 max-height），导致 mask 区域被裁剪；建议用min-height或让其自然包裹 - table 本身有
border-collapse: collapse+border，可能让 mask 边缘看起来断裂 —— 可临时加background: white到 wrapper 检查 mask 覆盖范围 - Chrome 115+ 开始支持
mask-border，但和mask-image无关，别混淆
替代方案：用 background-gradient + pointer-events:none 模拟
如果 mask 兼容性或调试成本太高，更稳妥的做法是用伪元素叠加渐变遮罩：
立即学习“前端免费学习笔记（深入）”；
- 给 wrapper 设
position: relative - 用
::after伪元素覆盖底部区域，背景设为linear-gradient(to bottom, rgba(255,255,255,0) 70%, white 100%) - 加
pointer-events: none确保不拦截表格交互 - 优点：100% 兼容，可控性强；缺点：不是真遮罩（比如无法遮住 box-shadow 或 outline）
真 mask 的边界控制和 alpha 精度更高，但仅当项目明确需要像素级渐隐（比如长表格滚动时动态遮罩）才值得折腾。
