php中表头不跟着滑动,table表固定表头的滚动

最新推荐文章于 2023-05-06 14:01:04 发布

user0exe

最新推荐文章于 2023-05-06 14:01:04 发布

阅读量245

点赞数

文章标签： php中表头不跟着滑动

这段JavaScript代码主要用于解决Internet Explorer浏览器中表格显示不正常的问题，特别是行宽和高以及滚动条的处理。它通过获取表格的滚动条宽度、内容宽度以及各单元格的宽高，然后调整单元格的宽度和高度，确保在有滚动条的情况下内容依然正确显示。同时，代码也考虑了单元格内边距和边框的影响。

摘要由CSDN通过智能技术生成

在ie中行大小好像有点问题，主要作借鉴作用

$(function(){

//获取滚动条的宽度

var scrollWidth = $('.trclass')[0].offsetWidth-$('.trclass')[0].scrollWidth;

//获取表内容的宽度

var trwidth = $('.trclass')[0].scrollWidth;

//去除滚动条之后内容的实际宽度

var tdwidth = $('.trclass')[0].scrollWidth-scrollWidth;

$('tr').width(trwidth);

//获取表中行列数

var trLength = $('.trclass tr').length;

for(var i=0; i

var tdl = Number($('.trclass tr').eq(i).css('width').replace(/[^0-9]/ig,""));

//获取每一行列数目

var tdLength = Number($('.trclass tr').eq(i).children('td').length);

var tdcount=0;

var trHeight = 0;

//获取行width总和

//获取列的最大的height像素值

for(var j=0;j

var tdthis = Number($('.trclass tr').eq(i).children('td').eq(j).prop('width'));

tdcount += tdthis;

var thisHeight = Number($('.trclass tr').eq(i).children('td').eq(j).css('height').replace(/[^0-9]/ig,""));

trHeight = trHeight>thisHeight?trHeight:thisHeight;

}

//每列赋予最大height像素值

for(var n=0;n

tdthis = Number($('.trclass tr').eq(i).children('td').eq(n).prop('width'));

$('.trclass tr').eq(i).children('td').eq(n).css('width',tdwidth*(tdthis/tdcount));

//若表头换行参照列行为

$('.thclass th').eq(n).width($('.trclass tr').eq(i).children('td').eq(n).width());

//var padHeight = Number($('.trclass tr').eq(i).children('td').eq(n).css('padding').replace(/[^0-9]/ig,""));

//var borderHeight = Number($('.trclass tr').eq(i).children('td').eq(n).css('border-top-width').replace(/[^0-9]/ig,""));

//$('.trclass tr').eq(i).children('td').eq(n).attr('height',trHeight);

}

//重写行表格高度

for(var m=0;m

//获取每一行列数目

var tdLengths = Number($('.trclass tr').eq(m).children('td').length);

var trHeights = 0;

//获取列的最大的height像素值

for(var js=0;js

var thisHeights = Number($('.trclass tr').eq(m).children('td').eq(js).css('height').replace(/[^0-9]/ig,""));

trHeights = trHeights>thisHeights?trHeights:thisHeights;

}

//每列赋予最大height像素值

for(var ns=0;ns

//var padHeights = Number($('.trclass tr').eq(m).children('td').eq(ns).css('padding').replace(/[^0-9]/ig,""));

//var borderHeights = Number($('.trclass tr').eq(i).children('td').eq(ns).css('border-top-width').replace(/[^0-9]/ig,""));

$('.trclass tr').eq(m).children('td').eq(ns).attr('height',trHeights);

}

});

th,td{display:block;float:left;text-align:center;vertical-align: middle;}

tr{display:block;width:100%;vertical-align: middle;}

第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行	第一行	第一行	第一行
第2行	第2行第2行第2行第2行第2行第2行第2行第2行	第2行	第2行
第3行	第3行	第3行	第3行
第4行	第4行	第4行	第4行
第5行	第5行	第5行	第5行
第6行	第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行	第6行	第6行
第7行	第7行	第7行	第7行
第7行	第7行	第7行	第7行
第7行	第7行	第7行	第7行
第7行	第7行	第7行	第7行
第7行	第7行	第7行	第7行
第7行	第7行	第7行	第7行