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 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
随机推荐
- openfire安装
服务器第一次能够开启,但不久就断开,再连接就会闪退,命令行更改Java路径后即可 http://www.jianshu.com/p/5d88fe201c71 开启服务器后,导入数据库脚本,创建几个测试 ...
- this的作用--转载
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- asp.net signalR 专题—— 第一篇 你需要好好掌握的实时通讯利器
一:背景 我们知道传统的http采用的是“拉模型”,也就是每次请求,每次断开这种短请求模式,这种场景下,client是老大,server就像一个小乌龟任人摆布, 很显然,只有一方主动,这事情就没那么完 ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理3
首先在webconfig中加入下面这句代码,这个主要是用来生成数据库的连接字符串 <connectionStrings> <add name="AuthorDesignCo ...
- CentOS 7 恢复 Windows 启动项
安装Linux时一般会自动识别windows系统并添加引导项,而 CentOS 默认不支持 NTFS 分区,CentOS7采用了Grub2,与CentOS6有区别.手动引导windows分区修改配置稍 ...
- html中的meta详解
1 name=viewport <meta name="viewport" content="width=device-width,initial-scale=1 ...
- 智力火柴游戏Android源码项目
该游戏源码是一个智力火柴游戏源码,游戏分为难.中.易三种模式,通过对火柴的移动来实现等式分成立,具有极好的市场价值和参考意义. 源码下载: http://code.662p.com/view/9741 ...
- mongoDB的安装（一）
0.安装环境说明: linux系统:centos6.5 mongoDB版本:mongodb-linux-x86_64-rhel62-3.2.7.tgz 1.下载 mongoDB的下载:https:// ...
- centos 6.6 使用tomcat6部署solr5.3.1
Solr现在是一个独立的服务器. 从Solr5.0开始,Solr不再发布为在任何Servlet容器中部署的“war”Web应用程序包(Web Application Archive).网上关于solr ...
- MMORPG大型游戏设计与开发（服务器 游戏场景 搜索机）
双十一注定是忙碌的日子,所以到了现在我才将今天自己学习的内容拿出来跟大家分享.搜索机是我自己暂时取的名字,其实简单的说就是场景里提供搜索的一个工具,负责场景对象的范围搜索和获取.空洞的理论总是让人一头 ...