BootstrapTable设置height属性后，表头和表格内容不对齐

最新推荐文章于 2025-06-25 09:09:56 发布

原创最新推荐文章于 2025-06-25 09:09:56 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap-table #height #表头表格内容不对齐

【前端】专栏收录该内容

28 篇文章

订阅专栏

本文探讨了使用Bootstrap Table插件时遇到的高度设置与表头对齐问题。当数据量大时，表格平铺整个页面，设置高度后表头与内容不对齐。通过修改bootstrap-table.js文件中的resetView方法，注释掉特定代码行，解决了表头初始化问题，实现了高度自适应且内容对齐的表格展示。

一般我们使用bootstrap-table插件的时候不设置height高度属性都是可以完全正常的；但是有一个问题是如果每页显示的数据很多的时候，所有的数据会平铺到整个页面，而不会在一定的范围内使用滚动的方式展示，这样看起来很不爽；如果设置了height属性又会出现另外一个问题就是表头和表格内容不能对齐；

        // // 表格高度
        height: $(window).height()-160

解决方案是找到bootstrap-table.js中的 BootstrapTable.prototype.resetView方法，将如下代码注掉：

        if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
          //注释掉下面两行 取消表头初始化解决表头和内容不对齐问题
//            this.resetHeader();
//            padding += this.$header.outerHeight();
        } else {
            this.$tableHeader.hide();
            this.trigger('post-header');
        }