bootstrap-table 表头和内容对不齐解决办法

悠悠 2022-06-11 01:27 419阅读 0赞

# [bootstrap-table 表头和内容对不齐解决办法][bootstrap-table] #

1.  偶然机会学习bootstrap，表格利用bootstrap-table实现，使用bootstrap-table过程中，发现了一个非常棘手的问题，在ie浏览器中，表格的表头和内容对不齐，特别是列比较多且有分页时候最明显。

相信很多同学，也遇到过这样的问题，下面提供解决办法。

![1093523-20170110143211494-2101664399.png][]

1.  查看了所有百度、博客相关文章，都没有解决。经过一周的研究，终于通过修改源码解决了。
2.  打开bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法，找到如下代码

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

最终效果如下：

![1093523-20170110143957791-1468506649.png][]

[bootstrap-table]: http://www.cnblogs.com/weichangyu/p/6269265.html
[1093523-20170110143211494-2101664399.png]: /images/20220611/ad5853e5af884c6b822d3e37ccdfbf2d.png
[copycode.gif]: /images/20220611/532a2e4e009d4828b16c52b845b35fe8.png
[1093523-20170110143957791-1468506649.png]: /images/20220611/e3eb8b1a43094bccb4ed4ddddb46fe27.png

发表评论取消回复

表情：

评论列表（有 0 条评论，419人围观）

还没有评论，来说两句吧...

相关阅读

相关解决input框对不齐的问题

要想解决这个问题，首先你得了解input框了解它的默认样式 input框的默认样式有: 1：获取焦点时的轮廓 outline； 2：2px的border边

布满荆棘的人生/ 2023年07月05日 05:23/ 0 赞/ 51 阅读

相关 elementui 不重新渲染页面，表头和标题数据对不齐问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

骑猪看日落/ 2023年02月22日 10:58/ 0 赞/ 1 阅读

相关 element表格头部和内容对不齐问题

![就这样][20201021103019974.png_pic_center] 就像这样的表格头部和内容对不齐解决办法非常简单这段代码复制到app.vue里边起

ゝ一世哀愁。/ 2022年12月17日 01:20/ 0 赞/ 185 阅读

相关 el-table表格对不齐

现象 ![在这里插入图片描述][20210207110951143.png] 解决办法可以在当前页面加入以下代码试试。 <style>

我会带着你远行/ 2022年10月28日 15:27/ 0 赞/ 127 阅读

相关 BootStrapTable.js 表头与内容无法对齐

去掉 height 属性的配置即可保证数据表格的表头部分与数据部分对齐。代码详例如下： $(function () { $("servic

红太狼/ 2022年07月15日 08:42/ 0 赞/ 223 阅读

相关 BootStrapTable.js 表头与内容无法对齐

去掉 height 属性的配置即可保证数据表格的表头部分与数据部分对齐。代码详例如下： $(function () { $("servic

「爱情、让人受尽委屈。」/ 2022年07月15日 08:42/ 0 赞/ 251 阅读

相关 bootstrap-table 表头和内容对不齐解决办法

[bootstrap-table 表头和内容对不齐解决办法][bootstrap-table] 1. 偶然机会学习bootstrap，表格利用bootstrap-tab

悠悠/ 2022年06月11日 01:27/ 0 赞/ 420 阅读

相关 bootstrap-table 表头和内容宽度不一致, 列内容错位问题

1、解决bootstrap-table中表头和内容宽度不一致, 列内容错位问题 `在进行bootstrap分页处理的时候，使用bootstrap-table出现表头与内容

约定不等于承诺〃/ 2022年03月07日 04:18/ 0 赞/ 866 阅读

相关 BootstrapTable冻结表头（二）

BootstrapTable冻结表头

朱雀/ 2020年10月17日 17:57/ 0 赞/ 1058 阅读

相关 BootstrapTable冻结表头（一）

BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 Bootst...

朱雀/ 2020年10月17日 17:55/ 0 赞/ 1096 阅读