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>
jQuery控制表头的更多相关文章
- Jquery控制滚动显示欢迎字幕v2
Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...
- 用Jquery控制文本框只能输入数字和字母
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- jquery控制css的display属性(显示与隐藏)
jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- jQuery控制倒计时
1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
随机推荐
- Thinking in Java 笔记
大二就买了这本书,如今再看这本书,看到了一些以前没看的细节,也有了不同的体会.本文使用第4版,整理每章的笔记心得.老外的书有个特点,他会花费大量的文字去阐述一个概念,这比堆代码强多了. 第 1 章 对 ...
- [css]我要用css画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- Orchard中如何配置远端发布
Orchard中默认安装是有Blog功能的.下面介绍如何配置Remote Blog Publishing功能,使用Windows Live Writer客户端发布博客. 一,开启Remote Blog ...
- RHEL6 64位系统安装ORACLE 10g 64bit 数据库
记得去年4月份的时候,为公司部署测试环境和UAT环境时,在红帽RHEL6 64位系统安装ORACLE 10g 64位数据库时遇到了许多小问题,当时匆匆忙忙也没记录一下这些问题,前几天在虚拟机安装ORA ...
- RMAN还原32位数据库到64位实例的错误处理
将ORACLE 10g 32bit数据库还原到测试机ORACLE 10g 64bit的数据库实例上, 还原.恢复数据库后,使用open resetlogs打开数据库后,发现警告日志里面有ORA-120 ...
- SQLServer中修改字段为空
ALTER 表名 table1 ALTER COLUMN [字段] 类型 NULL; 例如: ) COLLATE Chinese_PRC_CI_AS NULL;
- Tomcat部署web项目
在Myeclipse中,我们很容易做到这一步:把一个web项目生成war文件 其实在eclipse中,实现这样的功能,也是很简单的. 下面就看一下是怎样操作的吧! 新建一个web项目: 取名为:ecl ...
- sizeof
一.sizeof使用的场合: 1.sizeof操作符的一个主要用途是与存储分配和I/O系统那样的例程进行通信.例如: void* malloc(size_t size); size_t fread(v ...
- Python简单爬虫入门二
接着上一次爬虫我们继续研究BeautifulSoup Python简单爬虫入门一 上一次我们爬虫我们已经成功的爬下了网页的源代码,那么这一次我们将继续来写怎么抓去具体想要的元素 首先回顾以下我们Bea ...
- ipv4理论知识3-分类编址之两级编址
两级编制 分类编址时,同一网络中的所有地址都属于统一个地址块,而每个地址块包含两部分:网络标识和主机标识.网络标识指明了网络,主机标识则指明了连接到该网络的一台特定的主机.如下图描绘了分类编址中一个I ...