php让表格滚动条,HTML页⾯table滚动条的实现
这篇⽂章主要介绍了关于HTML页⾯table滚动条的实现 ，有着⼀定的参考价值，现在分享给⼤家，有需要的朋友可以参考⼀下
table scrollbar & header fixed有很多页⾯由于数据量过⼤，会产⽣横纵滚动条。为了便于使⽤者观看，我们要把表头固定⼀下。根据这个需求写了个demo来实现这个功能。主要解决了⼏点问题：
1.table实现横纵滚动条
2.table表头固定
3.table列宽⾃适应
4.table内容不换⾏
主要代码块
css：.table-scroll {
width: calc(100% - 5px);
overflow-x: scroll;
white-space: nowrap;
}
.table-scroll table {
table-layout: fixed;
width: calc(100% - 10px);
background-color:darkseagreen ;
}
.table-scroll thead {
display: table-row;
background-color: bisque;
}
.table-scroll tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
height: calc(100vh - 300px);
}
.table-scroll th,td {
width: 160px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 160px;
border: 1px solid #808080;
}
h4, h5 {
color: cornflowerblue;
}
js：$(function() {
$('.table-scroll').scroll(function() {
$('.table-scroll table').width($('.table-scroll').width()
+ $('.table-scroll').scrollLeft());
});
var tableTdWidths = new Array();
var tableWidth = 0;
var tableTr0Width = 0;
var tableThNum = 0;
var tableTr1Width = 0;
tableWidth = $('.table-scroll table').css('width').replace('px','');
tableThNum = $('.table-scroll tr:eq(0)').children('th').length; if ($('.table-scroll tr').length == 1) { // header only if (tableWidth > tableTr0Width) {
$('.table-scroll tr:eq(0)').children('th').each(function(i){
$(this).width(parseInt(($(this).css('width').replace('px',''))
+ parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
});
}
} else { // header and body
html横向滚动条样式
tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px','');
$('.table-scroll tr:eq(1)').children('td').each(function(i){
tableTdWidths[i]=$(this).css('width').replace('px','');
});
$('.table-scroll tr:eq(0)').children('th').each(function(i) { if(parseInt($(this).css('width').replace('px', '')) >
parseInt(tableTdWidths[i])) {
tableTdWidths[i] = $(this).css('width').replace('px','');
}
}); if (tableWidth > tableTr1Width) {
/
/set all th td width
$('.table-scroll tr').each(function(i){
$(this).children().each(function(j){
$(this).css('min-width',(parseInt(tableTdWidths[j])
+ parseInt(Math.floor((tableWidth - tableTr1Width) /
tableThNum))) + 'px');
});
});
} else {
//method 1 : set all th td width
$('.table-scroll tr').each(function(i){
$(this).children().each(function(j){
$(this).css('min-width',tableTdWidths[j] + 'px');
});
});
}
}
});
html：
完成效果：1.固定表头 2.table横纵滚动条 3.table列宽⾃适应 4.table内容不换⾏
title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1title1
1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body12body1body1body1body1body1body1body1body1body1body1body1body1
body1 body1 body1 body1 body1 body1 body1 body1 body1 body1body1body1body1body1body1 body1 body1 body1 body1 body1 body1 body1 body1
body1
body1body1body1body1body1body1body1body1body1body1body15body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body16body1⽹上也有很多的例⼦，但是实现的效果不是想要的，⾃⼰⼯作需要做了⼀下，画⾯不好看，重点看效果，如有问题请指正！
相关推荐：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。