isolation: isolate不能在原生表格元素上生效，因其仅对已定位的块级容器有效；正确做法是用position: relative的div包裹table，并在其上设置isolation: isolate及必要z-index。
isolation 属性不能在 HTML 表格（<table>、<tr>、<td> 等）内部直接创建“表格专属”的层叠上下文——它根本不管是不是表格，只认一个条件：**该元素是否为已定位的块级容器**。
为什么 <table> 元素加 isolation: isolate 通常无效
标准表格元素（如 <table>、<tbody>、<tr>）默认 display 值是 table、table-row 等，不属于 block、flex 或 grid，也不被浏览器视为“可定位的块级容器”。即使你强行加了 isolation: isolate，浏览器会静默忽略——因为不满足生效前提。
-
<table>默认 display: table → 不触发层叠上下文 -
<tr>默认 display: table-row → 无法设position，更无法生效z-index或isolation -
<td>默认 display: table-cell → 同样不支持position: relative（除非显式改display: block，但会破坏表格布局）
想在表格区域隔离层级或混合，正确做法是包一层容器
你得把表格“装进”一个符合要求的父容器里，而不是试图改造表格原生结构：
- 用
<div class="table-wrapper">包裹整个<table> - 给这个
<div>设position: relative（或absolute/sticky） - 再加
isolation: isolate和必要时的z-index - 如果要配合
mix-blend-mode，确保混合目标（如覆盖层、图标）是该<div>的子元素，而非直接插在<td>里
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper"> <table>...</table> <div class="overlay" style="mix-blend-mode: multiply;">✓</div> </div>
CSS：
.table-wrapper {
position: relative;
isolation: isolate;
z-index: 10;
}
常见错误：在 <td> 上硬加 isolation 还配 position
有人试过这样写：
<td style="position: relative; isolation: isolate;">内容</td>
结果发现完全没用——原因很直接：
-
<td>是table-cell，设position: relative后，z-index依然无效（规范限制） - 没有有效的
z-index，isolation: isolate就失去意义（它依赖定位元素才能参与层叠顺序） - DevTools 的 «Layers» 面板里也看不到该
<td>成为 stacking context root
Safari 兼容和前缀问题必须检查
如果你的表格组件要跑在 Safari 15.3 及更早版本（比如企业内网旧 iPad），isolation: isolate 会直接失效：
- 必须加
-webkit-isolation: isolate前缀 - 不能只写
isolation: isolate，否则旧 Safari 当作无效声明丢弃 - 注意：Safari 15.4+ 才支持无前缀版本，而当前时间（2026年7月）主流已升级，但存量设备仍需兜底
安全写法：
.table-wrapper {
position: relative;
-webkit-isolation: isolate;
isolation: isolate;
}
真正容易被忽略的是：表格本身不是“层级容器”，它只是渲染模型；isolation 要起作用，永远需要一个**你可控的、已定位的、块级的 wrapper**——别跟原生表格标签较劲，绕过去才是最快路径。
