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 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
随机推荐
- Android 刷新相册
Android4.4之前: sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED,Uri.parse("file://" + f ...
- 学习tensorflow之mac上安装tensorflow
背景 听说谷歌的第二代机器学习的框架tensorflow开源了,我也心血来潮去探探大牛的产品.怎奈安装就折腾了一天,现在整理出来备忘. tensorflow官方网站给出的安装步骤很简单: # Only ...
- .Net Collection的一些理解——记录一次向实习生的答疑
公司最近进了个实习生,每天下班前我都会花一些时间来解答一下实习生的一些疑问.今天问起了关于集合排序方法Sort的一些疑问,这让我一下回到自己刚刚入行的时候.那个时候也遇到了集合排序的问题,为发现接口I ...
- SQL SERVER 2014 下IF EXITS 居然引起执行计划变更的案例分享
这个问题是在SQL SERVER 2005 升级到SQL SERVER 2014的测试过程中一同事发现的.我觉得有点意思,遂稍微修改一下脚本展示出来,本来想构造这样的一个案例来演示,但是畏惧麻烦,遂直 ...
- 【静默安装】configToolAllCommands响应文件问题
[静默安装]configToolAllCommands响应文件问题 客户在静默安装RAC 12.1.0.2的时候有如下的输出: Successfully Setup Software. As inst ...
- 记录一次MongoDB3.0.6版本wiredtiger与MMAPv1引擎的写入耗时对比
一.MongoDB3.0.x的版本特性(相对于MongoDB2.6及以下): 增加了wiredtiger引擎: 开源的存储引擎: 支持多核CPU.充分利用内存/芯片级别缓存(注:10月14日刚刚发布的 ...
- 图概PHP生命周期
一图胜千言~ 这是之前根据网上大牛们的分析和跟着阅读了一点源码而做出来的总结.因为那时候困于对整个过程没有一个全面的认识,所以想自己做个图吧,那样看起来要更加直接了当,说不定还能会有一个更好的认识和更 ...
- 删除Windows中隐藏的物理网卡和网络虚拟化失败后的虚拟网卡
Windows环境下,在更换硬件服务器主板和网卡等硬件.恢复操作系统或者网络虚拟化失败后,可能会出现网卡方面的问题.例如,设备管理器中多了不应该存在的网卡:因命名冲突无法重命名当前网络连接:IP地址冲 ...
- 烂泥：dnsmasq搭建简易DNS服务器
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 今天我们来介绍一个比较简单的DNS服务器dnsmasq.这款软件,已经被我成功使用到公 ...
- 教你看懂 OpenStack 日志 - 每天5分钟玩转 OpenStack（29）
instance 从创建到删除的整个生命周期都是由 Nova 管理的. 后面各小节我们以 instance 生命周期中的不同操作场景为例,详细分析 Nova 不同组件如何协调工作,并通过日志分析加深大 ...