el table 固定表头和首行_bootstrap table 固定 表头 冻结 窗格 固定首行 冻结首行 fixed 对齐 分享...

改成这样即可解决溢出的BUG

//首行//点击分页时候内容改变了，表格宽度就有变化，我们需要动态的修改固定表头的宽度，所以开始的时候删除上次添加的表头重新生成

if($("#shelter").length > 0) {

//元素存在时执行的代码

$('#shelter').remove();

}

var sourceTable = $("#table");//源表格的ID

var sourceTableHead = $("#table thead");//需要的表头部分

var headHeight = sourceTableHead.height();//部分的高度

var sourceTableWidth = sourceTable.outerWidth(); //源表格宽度

var testDiv = $(".fixed-table-body"); //测试内容宽度

var wrapDiv = $(".fixed-table-container"); //滚动条外部ID，测量DIV与头部的高度

var tempTop = wrapDiv.offset().top - $(window).scrollTop(); //测量DIV与网页的高度

//从源表格copy一个份表头和其中元素插入

//插入一个表格用来存放我们要固定的表头

$('#table').append('

var maintable = $("#maintable");

var fixTopDiv = $("#shelter");

fixTopDiv.hide();

maintable.hide();

//首行固定，首行先左侧滑动

fixTopDiv.css({

'height':headHeight,

'position':'relative',

'top':tempTop+"px",

'left':'30',

'width':testDiv.width()+"px",

'overflow':'hidden'

});

//设置fixed表头的宽度与源一致

$("#fixed_table_wrap,#fixed_table").css({'width':sourceTableWidth+"px"});

//设置每一个th元素与源th宽度一致达到对齐的效果，并且每次点击分页按钮时候都会重新设置

var targetHead = sourceTableHead.clone().attr('id','fix_head');

//这个加入位置比较偷懒的继承了bootstrap-table的结构css样式，使得的表头与源表样式一致

targetHead.appendTo('#fixed_table');

$("#table thead tr th").each(function(index,value){

var tempWidth = $(value).outerWidth();

var tempHeight = $(value).outerHeight();

$("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});

});

//div内容scroll

wrapDiv=$(".fixed-table-body");

wrapDiv.scroll(function(){

//与源表格同步左右滑动

var sl=-Math.max(wrapDiv.scrollLeft(),$('document').scrollLeft());

if(isNaN(sl)){

sl = - wrapDiv.scrollLeft();

}

fixTopDiv.css("left",(sl+30)+'px');

var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();

tempTop = wrapDiv.offset().top - $(window).scrollTop();

if(tempTop <= 0){

tempTop = 0;

}

var baseWidth = testDiv.width() + wrapDiv.scrollLeft();

//控制隐藏或显示

if (scroll_top >= 0) {

fixTopDiv.css({'top':(tempTop-30) +"px",'width':baseWidth+"px"});

if(!fixTopDiv.is(':visible')){

fixTopDiv.show();

maintable.show();

}

}else {

if(fixTopDiv.is(':visible')){

fixTopDiv.hide();

maintable.hide();

}

}

});

//浏览器scroll

$(window).on('scroll',function(){

tempTop = wrapDiv.offset().top - $(window).scrollTop();

var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();

var baseWidth = testDiv.width() + wrapDiv.scrollLeft();

if(tempTop <= 0){

tempTop = 0;

}

fixTopDiv.css({'top':(tempTop-30) +"px",'width':baseWidth+"px"});

//控制显示或输出

if (scroll_top >= 0) {

if(!fixTopDiv.is(':visible')){

fixTopDiv.show();

maintable.show();

}

}else {

if(fixTopDiv.is(':visible')){

fixTopDiv.hide();

maintable.hide();

}

}

});

//首行结束