Layui表格怎么固定左侧列或右侧列-Layui教程-PHP中文网

layui table 固定列支持 left/right 单独设置，允许多列同向固定但不可混用；需显式设 width、height 才生效，且 css 需手动继承至固定列容器，ie11 下建议降级处理。

layui table 固定列用 `fixed` 参数，但只支持 left / right 二选一

Layui 的 table.render 确实能固定列，但不是“同时固定左右”，而是每列单独设 fixed: 'left' 或 fixed: 'right'。注意：同一张表里可以有多个 fixed: 'left' 列（按顺序靠左堆叠），也可以有多个 fixed: 'right' 列（靠右堆叠），但不能混用在同一个列上。

fixed: 'left' 的列会脱离滚动容器，始终可见，宽度需显式设置（否则容易塌缩）
fixed: 'right' 同理，且会从表格最右侧开始反向排列
所有 fixed 列的 width 必须是具体数值（如 120），不能用 'auto' 或百分比
如果设置了 height 表格高度，固定列在垂直滚动时才真正“固定”；没设 height 时，固定效果可能不明显或失效

table.render({
  elem: '#demo',
  cols: [[
    {field: 'id', title: 'ID', width: 80, fixed: 'left'},
    {field: 'username', title: '用户名', width: 120, fixed: 'left'},
    {field: 'email', title: '邮箱', width: 160},
    {field: 'action', title: '操作', width: 140, fixed: 'right'}
  ]]
});

固定多列时，`fixed: 'left'` 列顺序错乱怎么办

这不是 bug，是 Layui 渲染逻辑：所有 fixed: 'left' 列会被提取出来，按它们在 cols 数组中的原始顺序从左到右排列。但如果你中间穿插了非固定列，又在后面加了另一个 fixed: 'left'，它仍会排在已有固定列最右边——这容易让人误以为“顺序没按代码写”。

确保所有想固定在左侧的列，都集中写在 cols 数组前面（或至少彼此相邻）
不要写成：[{fixed:'left'}, {无fixed}, {fixed:'left'}]，这样第二个 fixed:'left' 会跑到第一个后面，但视觉上被中间那列“隔开”，显得错位
如果必须逻辑分组，用注释区分，别靠位置判断渲染顺序

为什么固定列内容被截断、文字不换行、图标消失

这是固定列容器未继承样式导致的常见表现，本质是 Layui 对 fixed 列用了独立 DOM 结构，部分 CSS 没透传。

默认情况下，.layui-table-fixed-l 和 .layui-table-fixed-r 容器的 font-size、line-height、padding 可能和主表不一致
单元格内如果有 <button></button>、<i></i>（如 <i class="layui-icon"></i>），需确保对应 class 在固定列区域也生效
图标字体（layui-icon）有时因 font-family 未继承而显示为方块，可手动补一句：

.layui-table-fixed-l .layui-table-cell,
.layui-table-fixed-r .layui-table-cell {
  font-size: 14px;
  line-height: 24px;
}
.layui-table-fixed-l .layui-icon,
.layui-table-fixed-r .layui-icon {
  font-family: layui-icon !important;
}