响应式表格(table-responsive)表头与表数据位置偏移

最新推荐文章于 2022-12-12 15:24:42 发布

小灰灰城堡

最新推荐文章于 2022-12-12 15:24:42 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： bootStrap表格

本文链接：https://blog.youkuaiyun.com/GreyCastle/article/details/100993363

本文解决了一个在使用BootStrap的响应式表格时，拖动滚动条导致表头与数据错位的问题。通过调整表格宽度和高度，确保表头与数据列始终保持对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

先吐槽一下：一工作就不像学校那样有时间写博客了，只能抽点空，来把之前打好的草稿补补。哈哈。做项目遇到的一大堆错误，慢慢整理吧。

进入正题：

这个错误呢：是我在做公司项目的时候遇到的，之前很少做前端的项目，这次一到公司连续做了2个月的前端。

错误的原因就是：BootStrap中的表格由于设置了class=table-responsive（响应式）和滚动条才出现的这个小问题，就是拖拽滚动条的时候会出现表头和表数据位置不一样。

解决办法：（在数据加载成功的函数中加上下面的代码就Ok）

onLoadSuccess: function (req) {
            $('.fixed-table-header').css({ 'width': 'calc(100% - 17px)' });
            setTimeout(function () {
                var height = $('.fixed-table-body-columns').height();
                $('.fixed-table-body-columns').height(height - 14.5);
            }, 100);

或者在你的代码中添加（不要添加错地方）

$(window).resize(function () {
    setTimeout(function () {
        var height = $('.fixed-table-body-columns').height();
        $('.fixed-table-body-columns').height(height - 14.5);
    }, 10);
});

结尾：

分享：努力努力，方法还是有的！