bootstrap table列和表头对不齐的解决方法
作者:奔跑的蜗牛 时间:2023-08-24 16:30:08
我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样。
通过Chrome浏览器 f12,看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header .fixed-table-footer这两个div没有滚动条。
解决方法:
bootstraptable在渲染完列表时会执行onPostBody事件,代码如下。
$('#dataGrid').bootstrapTable({
method: 'post',
url: 'http://www.itxst.com/?ajax',
dataType: "json",
striped: true, //隔行变色
pagination: true, //底部显示分页码
pageSize: 30, //每页显示行数
pageNumber: 1, //页码
pageList: [30, 50, 100, 200, 500], //每页显示数量选择器
idField: "objectId", //主键字段
showColumns: true, //显示隐藏列
showRefresh: true, //刷新按钮
singleSelect: true,
search: false,
clickToSelect: true,
sidePagination: "server",
queryParams: queryParams,
queryParamsType: "limit",
toolbar: "#toolbar", //设置工具栏的Id
columns: column, //要显示的列
silent: true, //刷新事件必须设置
formatLoadingMessage: function () {
return "it小书童正在加载中...";
},
formatNoMatches: function () {
return '未查询到结果';
},
onLoadError: function (data) {
},
onClickRow: function (row) {
window.location.href = "/detail?id=" + row.objectId;
},
onPostBody:function()
{
//重点就在这里,获取渲染后的数据列td的宽度赋值给对应头部的th,这样就表头和列就对齐了
var header=$(".fixed-table-header table thead tr th");
var body=$(".fixed-table-header table tbody tr td");
var footer=$(".fixed-table-header table tr td");
body.each(function(){
header.width((this).width());
footer.width((this).width());
});
}
});
来源:http://www.itxst.com/detail/yaqzzfqy.html
标签:bootstrap,table,列,表头
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
解析SQLServer获取Excel中所有Sheet的方法
2024-01-18 15:11:26
Vue组件间的样式冲突污染问题详解
2023-07-02 16:59:33
![](https://img.aspxhome.com/file/2023/5/139875_0s.jpg)
asp提高首页性能的一个技巧
2008-04-05 06:54:00
SQL Server 数据库基础编程详解
2024-01-17 03:29:37
如何让用户再次访问我的网站时不需再提交相关信息?
2010-05-16 15:05:00
关于Interlij 无法使用中文输入法的解决方法(适用于Interlij全家桶 Linux环境)
2023-07-18 13:46:41
![](https://img.aspxhome.com/file/2023/9/127239_0s.png)
python实现库存商品管理系统
2023-06-01 06:37:29
![](https://img.aspxhome.com/file/2023/7/80597_0s.jpg)
JS+CSS实现闪烁字体效果代码
2024-04-18 09:31:04
Typora 0.11.18免费版本安装使用教程(亲测可用)
2023-10-29 16:56:58
![](https://img.aspxhome.com/file/2023/3/131773_0s.png)
mysql累积聚合原理与用法实例分析
2024-01-25 14:23:43
![](https://img.aspxhome.com/file/2023/4/111394_0s.png)
Python数据读写之Python读写CSV文件
2023-04-04 00:59:46
![](https://img.aspxhome.com/file/2023/0/135370_0s.png)
python中如何设置list步长
2022-11-04 14:24:02
python字符串常用方法及文件简单读写的操作方法
2023-11-24 10:20:04
webpack cjs运行时分析示例详解
2024-04-19 09:51:56
![](https://img.aspxhome.com/file/2023/2/136072_0s.jpg)
如何删除vue项目下的node_modules文件夹
2023-07-02 17:10:00
![](https://img.aspxhome.com/file/2023/0/139960_0s.png)
Python Sleep休眠函数使用简单实例
2021-12-20 17:05:50
vue2.0父子组件间通信的实现方法
2024-04-28 09:20:16
python每5分钟从kafka中提取数据的例子
2022-05-15 16:35:52
PHP生成sitemap.xml地图函数
2024-06-05 09:23:16
pip search报错问题及解决
2022-12-20 23:33:12
![](https://img.aspxhome.com/file/2023/5/134815_0s.png)