jq表头固定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style type="text/css">
#table-container{width:650px;height:250px;overflow: auto;margin: 50px;border: 1px solid #DDD;}
#table-container table{width: 100%;border-width: 0;border-collapse: collapse;}
#table-container table td{padding: 0;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #FFF;}
#table-container .table-top td, #table-container .table-lt td, #table-container .table-left td{background: green;}
#table-container .table-top td:last-child{border-right: 0px solid #DDD;}
#table-container .table-right td:last-child{border-right: 0px solid #DDD;}
#table-container .table-right tr:last-child td{border-bottom: 0px solid #DDD;}
#table-container .table-left tr:last-child td{border-bottom: 0px solid #DDD;}
#table-container td div{display: inline-block;max-width: 200px;margin:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;line-height: 24px;}
#table-container .table-lt{position: fixed;z-index:3;}
#table-container .table-top{position: fixed;overflow:hidden;z-index:2;}
#table-container .table-left{position: fixed;overflow:hidden;z-index:2;}
#table-container .table-right{position: relative;z-index:1;}
#table-container .table-mask{position: relative;} </style>
<body>
<div id="table-container">
<table>
<tbody>
<tr><td>
<div>header-left-top</div>
</td>
<td>
<div>topTitle1</div>
</td>
<td>
<div>topTitle2</div>
</td>
<td>
<div>topTitle3</div>
</td>
<td>
<div>topTitle4</div>
</td>
<td>
<div>topTitle5</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle1</div>
</td>
<td>
<div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouioud</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle2</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle3</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle4</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle5</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle6</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle7</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle8</div>
</td>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$.fn.scrollTab = function(){
var container = this;
container.find("table").after('<div class="table-lt" /><div class="table-top" /><div class="table-left" /><div class="table-right" />');
var ltTable = container.find(".table-lt"),
topTable = container.find(".table-top"),
leftTable = container.find(".table-left"),
rightTable = container.find(".table-right"); var tab_lt = this.find("tbody tr:first-child td:first-child").remove(),
tab_top = this.find("tbody tr:first-child").remove(),
tab_left = this.find("tbody tr td:first-child").remove(),
tab_right = this.find("table");
this.find("table").remove();
ltTable.html('<table><tbody></tbody></table>').find("tbody").append(tab_lt[0]);
topTable.html('<div class="table-mask"><table><tbody></tbody></table></div>').find("tbody").append(tab_top);
leftTable.html('<div class="table-mask"><table><tbody></tbody></table></div>');
for(var td of tab_left){
var tr = document.createElement("tr")
tr.append(td)
leftTable.find("tbody").append(tr)
}
rightTable.append(tab_right[0]);
var containerWidth = 0,
containerHeight =0, ltTableWidth = 0,
ltTableHeight = 0, widthJson = {}, timerLT = null; ltTableWidth = ltTable.width();
ltTable.width(ltTableWidth);
topTable.css("marginLeft",ltTableWidth);
leftTable.width(ltTableWidth);
rightTable.css("marginLeft",ltTableWidth);
ltTableHeight = ltTable.height();
leftTable.css("marginTop",ltTableHeight+"px");
rightTable.css("marginTop",ltTableHeight+"px"); containerHeight = container.height();
containerWidth = container.width();
topTable.width(containerWidth - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
leftTable.height(containerHeight - ltTableHeight - (container.innerHeight() - container[0].clientHeight)); // figure out the width of each DIV in TD --start
function setDivWidth(obj){
$(obj).find("div").each(function(index){
if(!widthJson[index]){
widthJson[index] = 0;
}
if(widthJson[index]<$(this).width()) {
widthJson[index] = $(this).width();
}
});
}
topTable.find("tr").each(function(){
setDivWidth(this);
});
rightTable.find("tr").each(function(){
setDivWidth(this);
}); topTable.find("tr:first div").each(function(index){
$(this).width(widthJson[index]);
});
rightTable.find("tr:first div").each(function(index){
$(this).width(widthJson[index]);
});
// figure out the width of each DIV in TD --end container.scroll(function(){
var currentScrollTop = $(this).scrollTop(),
currentScrollLeft = $(this).scrollLeft();
topTable.find(".table-mask").css("left", -currentScrollLeft+"px");
leftTable.find(".table-mask").css("top", -currentScrollTop+"px"); }); $(document).scroll(function(){
var currentScrollTop = $(this).scrollTop(),
currentScrollLeft = $(this).scrollLeft();
ltTable.css("marginTop", -currentScrollTop+"px");
ltTable.css("marginLeft", -currentScrollLeft+"px");
topTable.css("marginTop", -currentScrollTop+"px");
topTable.css("marginLeft", ltTableWidth - currentScrollLeft+"px");
leftTable.css("marginTop", ltTableHeight - currentScrollTop+"px");
leftTable.css("marginLeft", -currentScrollLeft+"px"); }); $(window).resize(function(){
$(document).scroll();
}); timerLT = setInterval(function(){
if(containerWidth != container.width() || containerHeight != container.height()){
topTable.width(container.width() - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
leftTable.height(container.height() - ltTableHeight - (container.innerHeight() - container[0].clientHeight)); containerWidth = container.width();
containerHeight = container.height(); container.scroll();// for IE }; },0);
}
$("#table-container").scrollTab();
</script>
</body>
</html>
jq表头固定的更多相关文章
- html bootstrap 表头固定在顶部，表列 可以自由滚动的效果
该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/ ...
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- IE的表头固定/表头不动（使用expression）
本文主要介绍在IE浏览器中,实现表头固定的一种方法.这种方法使用到了 IE 浏览器特有的 expression 方法. 表头固定DEMO1 主要代码: <style type="tex ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...
随机推荐
- 安裝 14.04.1 Ubuntu 到 Lenovo thinkpad t460p
在 Lenovo Thinkpad T460p 安裝 ubuntu, BIOS 需要做一些設定, 沒設定的現象:不斷地停在 usb disk 設定 可以 使用 usb disk install 了!
- PHP实现linux命令tail -f
PHP实现linux命令tail -f 今天突然想到之前有人问过我的一个问题,如何通过PHP实现linux中的命令tail -f,这里就来分析实现下. 这个想一想也挺简单,通过一个循环检测文件,看文件 ...
- 用PHPstorm同步服务器文件断开连接
使用同步功能,PHPstorm好像会一个一个去对比服务器上的文件,导致频繁请求建立连接,服务器本地安全策略做了屏蔽,所以进入黑名单后就无法连接了
- Samba服务配置简明笔记
内部服务器之间拷贝数据,用root账号访问,没有做更复杂的设置. 1.用YUM安装samba服务器端及客户端: [root@tenjs05 init.d]# yum install samba sam ...
- mysql-5.7日志设置
环境 Windows10企业版X64 mysql安装目录:D:\mysql-5.7.15-winx64. 在mysql安装目录下手工新建一个log目录:mysql\log. mysql\my.ini内 ...
- 如何学好JAVA编程
我的思路: 1.我觉得先学学JSP,用纯JSP做个日记本简单的小系统,纯粹从语言层面上了解一些基 础知识,把tomcat玩熟了,就用记事本编就行,主要是熟悉,能够理解jsp运行机制.然 ...
- 6个重要的.NET概念:栈,堆,值类型,引用类型,装箱,拆箱
引言 本篇文章主要介绍.NET中6个重要的概念:栈,堆,值类型,引用类型,装箱,拆箱.文章开始介绍当你声明一个变量时,编译器内部发生了什么,然后介绍两个重要的概念:栈和堆:最后介绍值类型和引用类型,并 ...
- PHP读写文件
一:读取文件 例1: $xml = ""; //打开文件 $f = fopen('http://app.eyuebus.com/Public/apk/version.xml', ' ...
- tyvj1189 盖房子
描述 永恒の灵魂最近得到了面积为n*m的一大块土地(高兴ING^_^),他想在这块土地上建造一所房子,这个房子必须是正方形的.但是,这块土地并非十全十美,上面有很多不平坦的地方(也可以叫瑕疵).这些瑕 ...
- 代码质量管理工具 sonar 配置
代码检查工具有很多findBugs等等 sonar配置: 1.下载sonar 5.5, 解压,运行 sonarqube-5.5\bin\windows-x86-64\StartSonar.bat , ...