Layui如何使得table的固定列的高度于非固定列的高度一致

最新推荐文章于 2025-09-11 02:20:06 发布

原创最新推荐文章于 2025-09-11 02:20:06 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在layui框架中实现表格冻结行与普通行表头及表体高度同步的方法。通过动态监听表头和表体的高度变化，确保冻结行能够实时调整高度，保持与普通行一致的视觉效果。

在加载table的done回调函数中，使用以下代码：

//动态监听表头高度变化，冻结行跟着改变高度
$(".layui-table-header  tr").resize(function () {
    $(".layui-table-header  tr").each(function (index, val) {
        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
    });
});
//初始化高度，使得冻结行表头高度一致
$(".layui-table-header  tr").each(function (index, val) {
    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
//动态监听表体高度变化，冻结行跟着改变高度
$(".layui-table-body  tr").resize(function () {
    $(".layui-table-body  tr").each(function (index, val) {
        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
    });
});
//初始化高度，使得冻结行表体高度一致
$(".layui-table-body  tr").each(function (index, val) {
    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});