Bootstrap 解决Table设置height属性后,表格不对齐的问题

之前的一次开发中使用到了Bootstrap Table的组件 ,为了固顶表头 给table设置了height ,设置了height后表头固顶ok ,单表头与表格内容的不对齐

参考百度上的文章 解决了这个问题 记录下
 

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

	var Controller = {
		index: function () {
			// 初始化表格参数配置
			Table.api.init({
				extend: {
					index_url: 'qingdongams/diytable/alllatitude/index' + location.search,
					table: 'alllatitude',
				}
			});

			// 获取表格模板
			let table_tmp_data = Config.table_data_tmp;

			var table = $("#table");
			table.attr('data-height', document.body.offsetHeight - 100);

			// 初始化表格
			table.bootstrapTable({
				url: $.fn.bootstrapTable.defaults.extend.index_url,
				pk: 'id',
				sortName: 'weigh',
				fixedColumns : true,
				fixedNumber  : 2,
				columns : table_tmp_data,
				commonSearch: false,
                // 在表头加载完成后 调用更新表头方法
				onPostHeader:function (){
					Controller.api.reviseTableHeader();
				}
			});
		},
		api: {
			bindevent: function () {
				Form.api.bindevent($("form[role=form]"));
			},
            // 获取表身的宽度, 重新赋值给表头
			reviseTableHeader: function (){
				$('.fixed-table-container .fixed-table-header table thead tr th').each(function(i,n){
					var width = window.getComputedStyle($('.fixed-table-body table th').eq(i)[0]).width.replace('px','');
					$(n).css('width',width+'px');
					$(n).find('.fht-cell').css('width',width-1+'px');
				})
			}
		}
	};
	return Controller;
});

参考文章: https://codeleading.com/article/55673555766/#google_vignette

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值