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 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
随机推荐
- 内嵌iframe
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
- mysql: unknown variable 'character-set-client=utf8'
在同事安装的MySQL服务器上(居然安装的是My-SQL 5.1.73的老旧版本),登录MySQL时遇到下面"mysql: unknown variable 'character-set-c ...
- Tomcat：配置SSL
SSL简述 SSL就是安全套接字层,是一种允许web浏览器和 web服务器通过安全连接通信的技术.这是一个双向的过程,这意味着 服务器和浏览器在发送数据之前加密所有交流的数据. SSL有一个重要的特点 ...
- windows系统快捷操作の进阶篇
上次介绍了windows系统上一些自带的常用快捷键,有些确实很方便,也满足了我们的一部分需求.但是我们追求效率的步伐怎会止步于此?这一次我将会进一步介绍windows上提升效率的方法. 一:运行 打开 ...
- Neutron 理解 (4): Neutron OVS OpenFlow 流表 和 L2 Population [Netruon OVS OpenFlow tables + L2 Population]
学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...
- C#基础---Attribute(标签） 和 reflect（反射) 应用
1.Attribute的定义与作用: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Micros ...
- ANSI Common Lisp Practice - My Answers - Chatper - 2
I work out the questions by myself Chapter 2 question 4. (defun greater (x y) (if (> x y) x y ) ) ...
- JPA中entityManager的CRUD
private EntityManagerFactory entityManagerFactory; private EntityManager entityManager; private Enti ...
- Oracle SQL函数
Oracle将函数大致分为单行函数,聚合函数和分析函数. 单行函数分为字符函数,日期函数,转换函数,数字函数,通用函数,decode函数 一.字符函数 1)大小写控制函数 01.Lower() 全部小 ...
- Flooded!
Flooded! Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5955 Accepted: 1800 Specia ...