table表格全屏滚动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Table Scroll</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 14px;
}
.clearfix {
*zoom: 1
}
.clearfix:after, .clearfix:before {
content: "";
display: table
}
.clearfix:after {
clear: both
}
.wrapscroll {
width: 1200px;
margin: 50px auto;
}
.wrapscroll .tbox {
width: 100%;
}
.wrapscroll .tbox-head-fix {
overflow-x: hidden;
display: none;
}
.wrapscroll .table-rel {
margin-bottom: 20px;
}
.table-border {
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
}
.wrapscroll .tbox table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
}
.wrapscroll .tbox table thead tr td {
background: #fafafa;
}
.wrapscroll .tbox table tr td {
width: 100px;
height: 44px;
line-height: 44px;
padding: 0 20px 0 10px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background-color: #fff;
}
.wrapscroll .tbox-content {
border-right: 1px solid #e6e6e6;
overflow: hidden;
position: relative;
}
.wrapscroll .tbox-scroll {
overflow-x: auto;
}
/* 定义滚动条样式 */
.wrapscroll .tbox-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: rgba(225, 225, 225, 1);
}
/*定义滚动条轨道 内阴影+圆角*/
.tbox-scroll::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
background-color: rgba(240, 240, 240, .5);
}
/*定义滑块 内阴影+圆角*/
.wrapscroll .tbox-scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
background-color: rgba(181, 181, 181, 1);
}
.wrapscroll .tbox-bottom-scroll {
width: 100%;
overflow-x: auto;
}
.wrapscroll .tbox-left-fixed table {
-webkit-box-shadow: 2px 0 0 0 rgba(0, 0, 0, .05);
box-shadow: 2px 0 0 0 rgba(0, 0, 0, .05)
}
</style>
<body>
<div class="wrapscroll" id="wrapscroll1">
<div class="table-rel clearfix">
<div style="float: left;">查询结果 <input type="button" value="伸缩" class="telescoping"/></div>
<div style="float: right;">本次共查询：x个，成功：x个，失败：0个</div>
</div>
<div class="tbox tbox-content">
<table class="table-content table-border">
<thead>
<tr>
<td>序号</td>
<td>域名</td>
<td data-i="3" style="width: 110px; ">百度权重(近两年)</td>
<td data-i="4" style="width: 110px; ">百度权重(近一年)</td>
<td data-i="5" style="width: 110px; ">百度权重(近半年)</td>
<td data-i="6" style="width: 110px; ">百度收录(近两年)</td>
<td data-i="7" style="width: 110px; ">百度收录(近一年)</td>
<td data-i="8" style="width: 110px; ">百度收录(近半年)</td>
<td data-i="9" style="width: 110px; ">百度反链(近两年)</td>
<td data-i="10" style="width: 110px; ">百度反链(近一年)</td>
<td data-i="11" style="width: 110px; ">百度反链(近半年)</td>
<td data-i="12" style="width:90px;">百度PC权重</td>
<td data-i="13" style="width:90px;">百度移动权重</td>
<td data-i="14" style="">360PC权重</td>
<td data-i="15" style="">360移动权重</td>
<td data-i="16" style="">搜狗PC权重</td>
<td data-i="17" style="">搜狗移动权重</td>
<td data-i="18" style="">神马权重</td>
<td data-i="19" style="">头条权重</td>
<td data-i="20" style="">谷歌PR</td>
<td data-i="21" style="width: 150px; ">百度PC预计来路</td>
<td data-i="22" style="width: 150px; ">百度移动预计来路</td>
<td data-i="23" style="width: 150px; ">360PC预计来路</td>
<td data-i="24" style="width: 150px; ">360移动预计来路</td>
<td data-i="25" style="width: 150px; ">搜狗PC预计来路</td>
<td data-i="26" style="width: 150px; ">搜狗移动预计来路</td>
<td data-i="27" style="width: 150px; ">神马预计来路</td>
<td data-i="28" style="width: 150px; ">头条预计来路</td>
<td data-i="29" style="">百度总收录</td>
<td data-i="30" style="">百度日收录</td>
<td data-i="31" style="">百度周收录</td>
<td data-i="32" style="">百度月收录</td>
<td data-i="33" style="">360总收录</td>
<td data-i="34" style="">搜狗总收录</td>
<td data-i="35" style="">百度反链</td>
<td data-i="36" style="">360反链</td>
<td data-i="37" style="">搜狗反链</td>
<td data-i="38" style="width:200px;">域名注册人</td>
<td data-i="39" style="width: 200px; ">域名注册邮箱</td>
<td data-i="40" style="width: 100px; ">域名年龄</td>
<td data-i="41" style="width: 100px; ">域名创建时间</td>
<td data-i="42" style="width: 100px; ">域名过期时间</td>
<td data-i="43" style="width: 200px; ">域名DNS</td>
<td data-i="44" style="width:170px;">网站备案号</td>
<td data-i="45" style="width: 170px; ">主办单位名称</td>
<td data-i="46" style="width: 100px; ">主办单位性质</td>
<td data-i="47" style="width: 140px; ">网站审核时间</td>
<td data-i="48" style="width: 170px; ">网站标题</td>
<td data-i="49" style="width: 170px; ">网站关键词</td>
<td data-i="50" style="width: 170px; ">网站描述</td>
<td data-i="51" style="width: 110px; ">备案黑名单检测</td>
<td data-i="52" style="">QQ拦截检测</td>
<td data-i="53" style="">微信拦截检测</td>
<td data-i="54" style="">被墙检测</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
;(function () {
var TableScroll = {
defWidth: 1200, // 默认外层宽度
wrapObj: null, // 最外层div
// 设置滚动条宽度
setTableBottomScroll: function () {
this.createBoxBottomScroll();
let w = this.wrapObj.find('.table-content').width();
this.wrapObj.find('.tbox-bottom-scroll').css('display', 'block');
this.wrapObj.find('.tbox-bottom-scroll>div').css('width', w);
},
// 获取滚动条到顶部的距离
toTopDistance: function () {
let ele = this.wrapObj,
wt = $(window).scrollTop(),
et = ele.offset().top,
theadH = ele.find('.table-content>thead>tr>td').height();
return wt - et - theadH;
},
// 获取滚动条到底部的距离
toBottomDistance: function () {
let ele = this.wrapObj.find('.tbox-content'),
elementHeight = $(ele).outerHeight(),
scrollPosition = $(window).scrollTop() + $(window).height();
return (scrollPosition - ($(ele).offset().top + elementHeight));
},
// table 左边前2列头部是否显示边线
leftTopShowLine: function (tableScrollLeft) {
if (tableScrollLeft <= 0) {
this.wrapObj.find('.tbox-left-top-fixed>table').css({
'border-right': 'none',
'-webkit-box-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
'box-shadow': '0 0 0 0 rgba(0, 0, 0, 0)'
});
} else {
this.wrapObj.find('.tbox-left-top-fixed>table').css({
'border-right': '1px solid #e6e6e6',
'-webkit-box-shadow': '2px 0 0 0 rgba(0, 0, 0, .05)',
'box-shadow': '2px 0 0 0 rgba(0, 0, 0, .05)'
});
}
},
createBoxHeadFix: function () {
if (this.wrapObj.find('.tbox-head-fix').length > 0) return;
let html = '<div class="tbox tbox-head-fix"><table class="table-border"><thead>' + this.wrapObj.find('.tbox-content').find('thead').html() + '</thead></div>';
this.wrapObj.append(html);
},
createBoxBottomScroll: function () {
if (this.wrapObj.find('.tbox-bottom-scroll').length > 0) return;
let html = '<div class="tbox-bottom-scroll tbox-scroll" style="display: none;"><div style="width: ' + this.defWidth + 'px;"> </div></div>';
this.wrapObj.append(html);
},
createBoxLeftFix: function () {
if (this.wrapObj.find('.tbox-left-fixed').length > 0) return;
let html = '';
this.wrapObj.find('.tbox-content').find('tr').each(function (i, e) {
if (i == 0) {
html += '<thead>';
} else if (i == 1) {
html += '<tbody>';
}
html += '<tr>' +
'<td style="width: ' + ($(e).find('td').eq(0).width() - 1) + 'px;">' + $(e).find('td').eq(0).html() + '</td>' +
'<td style="width: ' + $(e).find('td').eq(1).width() + 'px;"><div style="width: ' + $(e).find('td').eq(1).width() + 'px;" class="autohide">' + $(e).find('td').eq(1).html() + '</div></td>' +
'</tr>';
if (i == 0) {
html += '</thead>';
}
});
html += '<tbody>';
html = '<div class="tbox tbox-left-fixed"><table class="table-content table-border">' + html + '</table></div>';
this.wrapObj.find('.tbox-content').append(html);
},
createBoxLeftTopFix: function () {
if (this.wrapObj.find('.tbox-left-top-fixed').length > 0) return;
let html = '';
this.wrapObj.find('.tbox-content').find('tr').each(function (i, e) {
if (i !== 0) return false;
html += '<thead>' +
'<tr>' +
'<td style="width: ' + ($(e).find('td').eq(0).width() - 1) + 'px;">' + $(e).find('td').eq(0).html() + '</td>' +
'<td style="width: ' + $(e).find('td').eq(1).width() + 'px;"><div style="width: ' + $(e).find('td').eq(1).width() + 'px;" class="autohide">' + $(e).find('td').eq(1).html() + '</div></td>' +
'</tr>' +
'</thead>';
});
html = '<div class="tbox tbox-left-top-fixed"><table class="table-content table-border">' + html + '</table></div>';
this.wrapObj.find('.tbox-content').append(html);
},
// 固定table头部
fixedTop: function () {
this.createBoxHeadFix();
let tableWidth = this.wrapObj.width(),
toTopDistance = this.toTopDistance();
if (toTopDistance > 0) {
this.wrapObj.find('.tbox-head-fix').css({
'width': tableWidth + 'px',
'display': 'block',
'position': 'fixed',
'top': '0',
'z-index': '9',
'padding': '0',
'margin': '0',
});
} else {
this.wrapObj.find('.tbox-head-fix').removeAttr("style");
}
},
// 固定table左侧
fixedLeft: function (tableScrollLeft) {
if (tableScrollLeft <= 0) {
this.wrapObj.find('.tbox-left-fixed').remove();
} else {
this.createBoxLeftFix();
let width = 0;
this.wrapObj.find('.tbox-content').find('tr').each(function (i, e) {
if (i == 0) {
width = $(e).find('td').eq(0).width() + $(e).find('td').eq(1).width();
} else {
return false;
}
});
this.wrapObj.find('.tbox-left-fixed').css({
width: width + 'px',
background: '#fff',
position: 'absolute',
top: '0',
left: tableScrollLeft + 'px',
});
}
},
// 固定table左侧的头部
fixedLeftTop: function () {
let toTopDistance = this.toTopDistance();
if (toTopDistance <= 0) {
this.wrapObj.find('.tbox-left-top-fixed').remove();
} else {
this.createBoxLeftTopFix();
let width = 0;
this.wrapObj.find('.tbox-content').find('tr').each(function (i, e) {
if (i == 0) {
width = $(e).find('td').eq(0).width() + $(e).find('td').eq(1).width();
} else {
return false;
}
});
this.wrapObj.find('.tbox-left-top-fixed').css({
width: width + 'px',
background: '#fff',
position: 'fixed',
top: 0,
'z-index': 50,
});
}
},
// 固定table底部滚动条
fixedBottom: function () {
let margin = 20,
wrapWidth = this.wrapObj.width(),
toBottomDistance = this.toBottomDistance() - margin;
if (toBottomDistance <= 0) {
this.wrapObj.find('.tbox-bottom-scroll').css({
'width': wrapWidth + 'px',
'position': 'fixed',
'bottom': '0',
});
} else {
this.wrapObj.find('.tbox-bottom-scroll').removeAttr("style");
}
},
windowResize: function () {
let wrapWidth = this.wrapObj.width(),
state = this.wrapObj.find('.telescoping').attr('data-state') || 0;
if (state == 0) {
let wrapResetWidth = $(window).width() < this.defWidth ? '100%' : this.defWidth + 'px';
this.wrapObj.css({'width': wrapResetWidth});
wrapWidth = this.wrapObj.width();
}
this.wrapObj.find('.tbox-head-fix').css({'width': wrapWidth + 'px'});
this.wrapObj.find('.tbox-bottom-scroll').css({'width': wrapWidth + 'px'});
},
event: function () {
let _this = this;
let tableScrollLeft = 0;
$(window).on('scroll', function () {
_this.fixedTop();
_this.fixedBottom();
_this.fixedLeftTop();
_this.leftTopShowLine(tableScrollLeft);
_this.wrapObj.find('.tbox').scrollLeft(tableScrollLeft);
}).on('resize', function () {
_this.windowResize();
});
// 滚动条左右滚动，带动数据列表、数据列表表头滚动
_this.wrapObj.find('.tbox-scroll').on('scroll', function () {
tableScrollLeft = $(this).scrollLeft();
_this.wrapObj.find('.tbox').scrollLeft(tableScrollLeft);
_this.fixedLeft(tableScrollLeft);
_this.fixedLeftTop();
_this.leftTopShowLine(tableScrollLeft);
});
_this.wrapObj.find('.telescoping').on('click', function () {
let state = $(this).attr('data-state') || 0;
if (state == 0) {
// 伸
_this.wrapObj.css({'width': '100%'});
_this.wrapObj.find('.tbox-bottom-scroll').css({'width': _this.wrapObj.width() + 'px'});
} else {
// 缩
_this.wrapObj.css('width', _this.defWidth + 'px');
_this.wrapObj.find('.tbox-bottom-scroll').css({'width': _this.defWidth + 'px'});
}
$(this).attr('data-state', state ^ 1);
});
},
};
$.fn.extend({
runTableScroll: function () {
TableScroll.wrapObj = this;
TableScroll.setTableBottomScroll();
TableScroll.fixedTop();
TableScroll.fixedBottom();
TableScroll.windowResize();
TableScroll.event();
}
});
})();
$(function () {
// 填充表格数据
(function () {
let h = '',
tdNum = $('.wrapscroll').find('.table-content>thead>tr>td').length;
for (let rn = 1; rn <= 50; rn++) {
h += '<tr>';
for (let i = 1; i <= tdNum; i++) {
if (i === 1) {
h += '<td>' + rn + '</td>';
} else if (i === 2) {
h += '<td>' + Math.ceil(Math.random() * 1000) + '.com</td>';
} else {
h += '<td>' + Math.ceil(Math.random() * 1000000) + '</td>';
}
}
h += '</tr>';
}
$(".tbox>table>tbody").append(h);
}());
$('#wrapscroll1').runTableScroll();
});
</script>
</body>
</html>
页:
[1]