Layui table 不支持「中间固定列」,仅支持 fixed: 'left' 和 fixed: 'right';其三容器分离架构(左、中、右)决定了中间区域为滚动主体,无中间锚点或独立定位层,强行模拟易导致错位、同步失效等问题。
layui table 不支持「中间固定列」——它只认 fixed: 'left' 和 fixed: 'right',没有 fixed: 'center' 或类似机制。所谓“中间固定”,本质是伪需求,实际只能靠 hack 方式模拟,且稳定性差、维护成本高。
为什么不能真正固定中间列
Layui 的固定列实现依赖三容器分离:.layui-table-fixed-l(左)、.layui-table-body(中)、.layui-table-fixed-r(右)。中间区域天生就是滚动主体,所有未声明 fixed 的列都归入其中。框架不提供中间锚点或独立定位层,也没有事件或 API 允许你劫持某列脱离 .layui-table-body 并悬浮在中间视觉位置。
-
fixed: 'left'列会被抽离到.layui-table-fixed-l,靠左绝对定位 -
fixed: 'right'列被抽离到.layui-table-fixed-r,靠右绝对定位 - 中间区域宽度由剩余列总宽 + 滚动条占位动态计算,无法插入一个“相对固定”的列容器
替代方案:用 left + right 拼出“视觉中间”效果
如果你真需要某几列始终可见(比如关键状态列),可把它们拆成左右两组,利用 fixed: 'left' 和 fixed: 'right' 夹住中间内容区,形成“中间恒显”的错觉。前提是这些列数量少、宽度可控,且能接受布局逻辑重构。
- 把最左侧 1–2 列设为
fixed: 'left',显式写死width(如width: 120) - 把最右侧操作列等设为
fixed: 'right',同样必须写死width - 中间“关键列”不动,但需配合
height触发垂直滚动,否则横向滚动条不出,左右固定也无效 - 注意总宽度:所有
fixed列的width之和不能超过表格整体width配置值,否则会触发额外横向滚动,破坏视觉连贯性
强行“悬浮中间列”的风险操作(不推荐)
有人尝试用 JS 在 done 回调里把某列 DOM 抽出来,加 position: fixed + 手动计算 left 值,再 append 到 .layui-table-view 内部。这看似可行,但极易出问题:
- 滚动时 left 值需实时监听
.layui-table-body的scrollLeft并重算,稍有延迟就错位 - 表头与 tbody 行高不一致时,悬浮列对不齐行
- 窗口 resize、reload、列宽拖拽都会让偏移失效,必须全部重绑
- IE11 及部分移动端 WebView 对
position: fixed在嵌套 overflow 容器中支持极差 - 合计行(
totalRow)完全无法同步,需额外补 DOM 和样式
真正该做的:重新评估列优先级
所谓“中间固定”,往往暴露的是列设计问题。Layui 的列模型本就不适配复杂冻结场景。如果业务上真有 3+ 列必须恒显,说明:
- 当前表格字段过多,应考虑分页/筛选/折叠列(用
templet控制显示) - 关键字段可提至操作列旁,用
fixed: 'right'统一右钉 - 必要时放弃 Layui 原生 table,换用支持
sticky的轻量库(如virtual-scroll-table)或自研渲染逻辑
固定列不是 CSS 层叠顺序问题,而是 Layui 渲染架构的硬边界。越试图绕过它做“中间固定”,越容易掉进同步错位、事件丢失、重载失联的坑里。


















