固定列阴影不能用:nth-child()是因为layui固定列被抽离到独立容器，需分别对.layui-table-fixed-l/r下的td/th加内阴影，并处理overflow:hidden和position:absolute导致的裁剪问题。

固定列阴影为什么不能直接用 :nth-child()

因为 layui 的固定列（fixed: 'left' 或 fixed: 'right'）会被抽离到独立容器 .layui-table-fixed 中，dom 结构完全脱离主表体，.layui-table tbody tr td:nth-child(2) 这类选择器根本匹配不到固定列里的 td。你写的样式只作用于主表区域，固定列区域毫无反应。

必须定位到 .layui-table-fixed 容器加样式

固定列渲染后，会生成两个额外的包裹层：.layui-table-fixed-l（左固定）和 .layui-table-fixed-r（右固定）。你要给它们内部的单元格加阴影，而不是主表。

• 给左固定列第 1 列加内阴影（右侧贴边）：

  .layui-table-fixed-l .layui-table-body td:nth-of-type(1) {
    box-shadow: inset -2px 0 6px -2px rgba(0,0,0,.08);
    position: relative;
  }

• 给右固定列最后一列加内阴影（左侧贴边）：

  .layui-table-fixed-r .layui-table-body td:last-child {
    box-shadow: inset 2px 0 6px -2px rgba(0,0,0,.08);
    position: relative;
  }

• 表头固定列也要同步处理：.layui-table-fixed-l .layui-table-header th:nth-of-type(1) 和 .layui-table-fixed-r .layui-table-header th:last-child
• 如果固定列用了 templet 渲染复杂内容，确保父 td 没有 overflow: hidden —— 否则内阴影会被裁掉

滚动时阴影“断开”或错位的常见原因

固定列容器 .layui-table-fixed-l/r 默认是 position: absolute，且常被 .layui-table-box 的 overflow: hidden 截断。阴影看起来只在初始位置有，一滚动就消失。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 必须给 .layui-table-box 加 overflow: visible（否则阴影被裁）
• 同时为防布局溢出，建议加 padding-left: 4px（左固定）或 padding-right: 4px（右固定）留出阴影空间
• 别给 .layui-table-fixed 自己加 box-shadow —— 它是绝对定位层，阴影会浮在表格上方，和单元格不对齐
• 若表格启用了 height 配置，确保 .layui-table-fixed 的高度与主表一致，否则阴影纵向位置偏移

JS 动态加 class 更可控，但要注意时机

当固定列数量动态变化、或需按数据条件加阴影（比如仅对「状态=禁用」的行加右固定列阴影），就得用 JS。关键不是“怎么加”，而是“什么时候加”——必须等固定列 DOM 完全挂载后再操作。

• 在 done 回调里加 setTimeout(() => { ... }, 0)，避开 layui 内部渲染队列
• 用 $('.layui-table-fixed-r .layui-table-body td') 查找，别用 tbody tr td
• 给单元格加 class 后，CSS 写成：

  .shadow-fixed-r {
    box-shadow: inset 2px 0 6px -2px rgba(0,0,0,.1);
    position: relative;
  }

• 务必同时处理 .layui-table-fixed-r .layui-table-header th，否则表头和内容阴影不连贯

固定列阴影最易忽略的点：它本质上是两个独立 DOM 子系统，样式必须分而治之；overflow: hidden 和 position: absolute 的组合极易吃掉阴影，调试时优先检查这两个属性是否被意外覆盖。