jQuery控制表头

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.djs-list-tab {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
text-align: center;
font-size: 12px;
border-collapse: collapse;
border-spacing: 0;
}

.djs-list-tab a {
text-decoration: none;
}

.djs-list-tab thead tr {
border: 1px solid #51b0c2;
}

.djs-list-tab thead th {
border-right: 1px solid white;
}

.djs-list-tab thead th:last-child {
border-right: 1px solid #51b0c2;
}

.djs-list-tab tbody tr td {
border: 1px solid #ddd;
padding-top: 10px;
padding-bottom: 10px;
}

.djs-list-tab tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

.djs-list-tab tbody tr:nth-child(odd) {
background-color: white;
}

.djs-list-tab tbody tr:nth-child(odd):hover {
cursor: pointer;
background-color: #f5f5f5;
}

.djs-list-tab .bg-blue {
height: 35px;
background: #51b0c2;
color: white;

}

</style>
</head>
<body style="overflow: hidden">
<div style="height: 50px;width: 100%;border: 1px solid red;text-align: center;line-height: 50px">
<h1>table表头固定测试</h1>
</div>
<div class="page-content" style="width:100%;height:100vh; overflow:scroll;">
<div id="tabContent" class="tab-content clearfix" style="border:none;" >
<div id="tab-dashboard-content" class="tab-pane tab-pane-menu active">
<div>
<table class="djs-list-tab T-showHighLight">
<thead>
<tr class="bg-blue T-tr-fixed">
<th>导游姓名</th>
<th>性别</th>
<th>联系电话</th>
<th>导游等级</th>
<th>导游证编号</th>
<th>导游简介</th>
<th>启用标志</th>
<th>操作</th>
</tr>
</thead>
<tbody class="T-guide-list">
<!-- {{each guideList as guide}} -->
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
<tr>
<td>张欢</td>
<td>
女
</td>
<td>18200590723</td>
<td>
特级导游资格
</td>
<td>D-2541-145875</td>
<td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
</td>
<td>
<i class="ace-icon fa fa-times red bigger-125"></i> 已停用
</td>
<td>
<div class="btn-group">
<a class="T-action T-view cursor">查看</a>
<a class="T-action T-edit cursor R-right" data-right="1010003">
<label class="pad-r-5">|</label>
编辑
</a>
<a class="T-action T-delete cursor R-right" data-right="1010004">
<label class="pad-r-5">|</label>
删除
</a>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row pageMode">
<div>
<small>共计 1 条记录</small>
</div>
<div>
<div class="T-pagenation pull-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
function test(){
var $tab = $(".page-content");
$tab.off("scroll").scroll(function(event){
var $that = $(this),
$trFixed = $that.find('.T-tr-fixed'),
$table = $trFixed.closest("table"),
top = $table.offset().top - $that.offset().top;
if(top >= 0){
top = 0;
}
$trFixed.css({
'-webkit-transform': 'translateY('+(-top)+'px)',
'-moz-transform': 'translateY('+(-top)+'px)',
'-ms-transform': 'translateY('+(-top)+'px)',
'-o-transform': 'translateY('+(-top)+'px)',
'transform': 'translateY('+(-top)+'px)'
});
})
}
test();
</script>
</html>

posted @ 2016-06-29 10:53  往昔-安安  阅读(206)  评论(0)  编辑  收藏  举报