isolation: isolate不能在原生表格元素上生效，因其仅对已定位的块级容器有效；正确做法是用position: relative的div包裹table，并在其上设置isolation: isolate及必要z-index。

isolation 属性不能在 HTML 表格（<table>、<code><tr>、<code><td> 等）内部直接创建“表格专属”的层叠上下文——它根本不管是不是表格，只认一个条件：**该元素是否为已定位的块级容器**。 <h3>为什么 <code><table> 元素加 <code>isolation: isolate 通常无效

标准表格元素（如 <table>、<code><tbody>、<code><tr>）默认 display 值是 <code>table、table-row 等，不属于 block、flex 或 grid，也不被浏览器视为“可定位的块级容器”。即使你强行加了 isolation: isolate，浏览器会静默忽略——因为不满足生效前提。

• <table> 默认 display: table → 不触发层叠上下文 <li><code><tr> 默认 display: table-row → 无法设 <code>position，更无法生效 z-index 或 isolation
• <td> 默认 display: table-cell → 同样不支持 <code>position: relative（除非显式改 display: block，但会破坏表格布局）

  想在表格区域隔离层级或混合，正确做法是包一层容器

  你得把表格“装进”一个符合要求的父容器里，而不是试图改造表格原生结构：

  • 用 <div class="table-wrapper"> 包裹整个 <code><table><li>给这个 <code><div> 设 <code>position: relative（或 absolute/sticky）
  • 再加 isolation: isolate 和必要时的 z-index
  • 如果要配合 mix-blend-mode，确保混合目标（如覆盖层、图标）是该 <div> 的子元素，而非直接插在 <code><td> 里 <p>示例：</p> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;table-wrapper&quot;&gt; &lt;table&gt;...&lt;/table&gt; &lt;div class=&quot;overlay&quot; style=&quot;mix-blend-mode: multiply;&quot;&gt;✓&lt;/div&gt; &lt;/div&gt;</pre> <p>CSS：</p> <pre class="brush:php;toolbar:false;">.table-wrapper { position: relative; isolation: isolate; z-index: 10; }</pre> <h3>常见错误：在 <code><td> 上硬加 <code>isolation 还配 position

    有人试过这样写：

    

    html-deploy

    使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

    下载

    <td style="position: relative; isolation: isolate;">内容</td>

    结果发现完全没用——原因很直接：

    • <td> 是 <code>table-cell，设 position: relative 后，z-index 依然无效（规范限制）
    • 没有有效的 z-index，isolation: isolate 就失去意义（它依赖定位元素才能参与层叠顺序）
    • DevTools 的 «Layers» 面板里也看不到该 <td> 成为 stacking context root <h3>Safari 兼容和前缀问题必须检查</h3> <p>如果你的表格组件要跑在 Safari 15.3 及更早版本（比如企业内网旧 iPad），<code>isolation: isolate 会直接失效：
      • 必须加 -webkit-isolation: isolate 前缀
      • 不能只写 isolation: isolate，否则旧 Safari 当作无效声明丢弃
      • 注意：Safari 15.4+ 才支持无前缀版本，而当前时间（2026年7月）主流已升级，但存量设备仍需兜底

      安全写法：

      .table-wrapper {
        position: relative;
        -webkit-isolation: isolate;
        isolation: isolate;
      }

      真正容易被忽略的是：表格本身不是“层级容器”，它只是渲染模型；isolation 要起作用，永远需要一个**你可控的、已定位的、块级的 wrapper**——别跟原生表格标签较劲，绕过去才是最快路径。