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 ...
随机推荐
- Asp.Net MVC<七>：Model
Model 指ViewModel ,其作用: 用于目标Action的参数绑定 用于View呈现 Model元数据则是对ViewModel数据类型的描述,其作用在于控制作为Model的数据对象在View ...
- Message启动菜单个性化制作工具V1.0.3.1最终版
特点及功能 1.可以全新制作Message启动菜单文件!也可以选择修改已存在的菜单文件,制作或预览时会提示以哪个菜单版本为核心启动菜单. 2.支持更换背景图片,也支持图片标准化防止启动时黑屏,在选择背 ...
- 编译CM13源码添加来去电归属地 SudaMod开源项目，查看commit提交记录
这个问题纠结了很多时间,感谢苏打先森@Sudamod的开源项目. 大家知道CM13是没有来去点归属地的,就算有那也是google,对于中国人不适用,所以这里把方法贡献出来. 1.与通话有关的app D ...
- VS2010出现FileTracker : error FTK1011编译错误的解决办法
VS2010出现FileTracker : error FTK1011不知道是不是vs2010的一个bug,反正有人提交了. FileTracker : error FTK1011编译错误的解决办法有 ...
- python作用域和多继承
python作用域 python无块级作用域 看c语言代码: #include<stdio.h> int main() { > ) { ; } printf("i = %d ...
- HTML中超出文本使用省略号替代的CSS样式
a{ display: block; /*定义显示形式*/ overflow: hidden; /*截取超出字符*/ text-overflow: ellipsis; /*超出字符以…代替*/ whi ...
- ngBind ngBindTemplate ngBindHtml
ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...
- ubuntu sudo update与upgrade的作用及区别
ubuntu sudo update与upgrade的作用及区别 入门linux的同志,刚开始最迫切想知道的,大概一个是中文输入法,另一个就是怎么安装软件.本文主要讲一下LINUX安装软件方面的特点. ...
- JDK Collection 源码分析（2）—— List
JDK List源码分析 List接口定义了有序集合(序列).在Collection的基础上,增加了可以通过下标索引访问,以及线性查找等功能. 整体类结构 1.AbstractList 该类作为L ...
- .NET 多个程序配置文件合并到主app.config
.NET 多个程序配置文件合并到主app.config