根本原因是Layui将固定列用绝对定位单独渲染，与主表体隔离，导致行高无法自动同步。需在done回调中分别同步tbody和thead各行高度，并确保父容器宽度有效、无CSS干扰。
为什么固定列和主表体行高会不一致
根本原因是 layui 把固定列（.layui-table-fixed）用绝对定位单独渲染成一套 dom，和主表体（.layui-table-main）完全隔离。主表体的行高由内容撑开、换行、white-space 等共同决定，而固定列的行高默认按初始渲染值锁定，后续内容变化或字体加载完成都不会自动同步。
常见错误现象包括：固定列某行明显“矮一截”或“高一块”、鼠标悬停时背景色错位、排序图标上下偏移、多级表头中 rowspan 后高度断裂。
- 只设
width不设minWidth，列宽浮动导致行内换行点不同，进而影响行高 - 使用
templet渲染长文本但未控制white-space: nowrap或line-height - 表格父容器用了
display: flex或transform，干扰 Layui 内部高度测量 - done 回调里没等字体加载完就取
$(val).height()，返回的是未渲染完成的高度
用 done 回调手动同步 tbody 行高最可靠
这是目前兼容性最好、无需改源码、能覆盖 95% 场景的做法。核心逻辑是：在 table.render 的 done 回调中，遍历主表体每一行，把对应高度赋给固定列同索引的行。
注意必须用 .layui-table-main tr 作为基准源（它反映真实渲染后高度），目标是 .layui-table-fixed .layui-table-body tbody tr。
done: function(res, curr, count) {
// 确保 DOM 已稳定，加个小延迟更稳妥
setTimeout(function() {
$('.layui-table-main tr').each(function(index, val) {
var $mainTr = $(val);
var $fixedTr = $($('.layui-table-fixed .layui-table-body tbody tr')[index]);
if ($fixedTr.length) {
$fixedTr.height($mainTr.height());
}
});
}, 16);
}
- 不要用
resize监听——Layui 的tr元素不支持原生resize事件，多数时候监听不到 - 避免在
done里直接写$('tr').height(...)，容易选错上下文（比如选到表头thead tr） - 如果表格有分页或筛选，每次重载数据后
done都会触发，这段逻辑天然复用
表头（thead）高度不同步？得单独处理 fixed 表头
上面的 done 只同步了 tbody，但固定列的表头（.layui-table-fixed .layui-table-header）是另一套结构，需额外同步。尤其当有换行、rowspan、图标或自定义字体时，主表头和固定表头高度极易脱节。
做法类似：遍历主表头 .layui-table-header tr，把每行高度赋给固定表头对应 tr。
done: function(res, curr, count) {
setTimeout(function() {
// 同步 tbody 行高（上一段代码）
$('.layui-table-main tr').each(function(index, val) {
var $fixedTr = $($('.layui-table-fixed .layui-table-body tbody tr')[index]);
if ($fixedTr.length) $fixedTr.height($(val).height());
});
// 同步 thead 行高（新增）
$('.layui-table-header tr').each(function(index, val) {
var $fixedThTr = $($('.layui-table-fixed .layui-table-header table tr')[index]);
if ($fixedThTr.length) $fixedThTr.height($(val).height());
});
}, 16);
}
- 别漏掉
.layui-table-fixed .layui-table-header table tr这个完整路径——固定表头里嵌了一层table - 如果用了多级表头（
colspan/rowspan），确保index对应关系正确；可加console.log(index, $fixedThTr.length)调试 - 禁用
white-space: normal在表头，强制用white-space: nowrap可大幅减少换行带来的高度波动
高度同步后滚动条错位？检查容器结构和 CSS 干扰
即使行高对齐了，仍可能因容器布局问题导致视觉错位：比如固定列底部出现空白、滚动时固定列“抖动”、或竖向滚动条出现后整体右移。
关键检查点：
-
.layui-table-box的父级必须有明确宽度（如width: 1200px或max-width: 100%且上层有定宽），否则offsetWidth为 0，Layui 测量列宽失败 - 禁止对
.layui-table-box或其直接父级设置display: flex、display: grid、transform - 删掉自定义样式里可能干扰的
line-height、padding、box-sizing，尤其避免在.layui-table th上设height+line-height不匹配 - 如果用了
height: 'full-xxx'，确认页面没有overflow: hidden截断了表格容器
最简验证法：打开浏览器开发者工具，选中 .layui-table-box，看右侧 Computed 标签页里 offsetWidth 是否大于 0；不是，则父级宽度失效，所有高度/宽度同步都会失准。
