table的列固定
<body onload="showFix(true,false,initTableId);">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{
margin:0px;
}
table{
width:auto;
margin:0px;
font:Georgia 11px;
color:#333333;
text-align:center;
border-collapse:collapse;
}
table td{
border:1px solid #f00;
width:100px;
height:30px;
padding:15px;
}
</style> <script> var initLeft;
var initTop;
var isFixColumn = false;
var isFixRow = false;
/**
* added by 王伟 20160612
* param:
* isFixC: 是否固定列 true/false
* isFixR: 是否固定行 true/false
* initTableId： 原始表ID
*/
function showFix(isFixC,isFixR,initTableId){
//是否显示固定列或者固定行
isFixColumn = isFixC;
isFixRow = isFixR;
if(checkScrollBar('h')){
document.getElementById("fixedColumnDiv").style.display="block";
}
if(checkScrollBar('y')){
document.getElementById("fixedRowDiv").style.display="block";
}
//获取原始表的具体位置
var initTable = document.getElementById(initTableId);
initLeft = getPosition(initTable,'left');
initTop = getPosition(initTable,'top'); //如果div和table 之间有margin，则减去响应数值 if(checkScrollBar('h')){
var fixedColumnDiv = document.getElementById("fixedColumnDiv");
fixedColumnDiv.style.position='absolute';
fixedColumnDiv.style.left = initLeft;
fixedColumnDiv.style.top = initTop;
}
if(checkScrollBar('y')){
var fixedRowDiv = document.getElementById("fixedRowDiv");
fixedRowDiv.style.position='absolute';
fixedRowDiv.style.left = initLeft;
fixedRowDiv.style.top = initTop;
}
} /**
* 滚动时重新设置div层的位置
*/
window.onscroll = function(){
if(checkScrollBar('h')){
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var fixedColumnDiv = document.getElementById("fixedColumnDiv");
fixedColumnDiv.style.position='absolute';
fixedColumnDiv.style.left = (initLeft+scrollLeft)+'px';
fixedColumnDiv.style.top = initTop+'px';
}
if(checkScrollBar('y')){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var fixedRowDiv = document.getElementById("fixedRowDiv");
fixedRowDiv.style.position='absolute';
fixedRowDiv.style.left = initLeft+'px';
fixedRowDiv.style.top = (initTop+scrollTop)+'px';
}
} /**
* 获取元素的位置偏移量信息
* param:
* left:获取左偏移量
* top: 获取上偏移量
*/
function getPosition(obj,type){
var topValue= 0,leftValue= 0;
while(obj){
leftValue+= obj.offsetLeft;
topValue+= obj.offsetTop;
obj= obj.offsetParent;
}
finalvalue = leftValue + "," + topValue;
if(type == 'left'){
return leftValue;
}else if(type == 'top'){
return topValue;
}else {
return 0;
}
} /**
* 获取是否有滚动条
* param： h: 判断是否有横向滚动条，y：判断是否有竖向滚动条
* return：boolean， true：有，false：无
*/
function checkScrollBar(type){
//判断是否有滚动条，有滚动条才显示固定列层
var visuals = getPageSize('visual');
var reals = getPageSize('real');
if(type == 'h' && isFixColumn){
if(document.body.style.overflow!="hidden"
&& document.body.scroll!="no"
&& reals[1] > visuals[1])
{
return true;
}else{
return false;
}
}
if(type == 'y' && isFixRow){
if(document.body.style.overflow!="hidden"
&& document.body.scroll!="no"
&& reals[0] > visuals[0])
{
return true;
}else{
return false;
}
}
return false;
} /**
* 浏览器兼容的获取网页实际内容大小
* param: type 获取大小类型（visual或real）
* 参数值说明： visual： 获取网页课件区域高宽，real：网页内容真实宽高
*/
function getPageSize(type) {
//检测浏览器的渲染模式
var body = (document.compatMode&&document.compatMode.toLowerCase() == "css1compat")?document.documentElement:document.body;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0, 0];
pageDimensions[0] = body.clientHeight;
pageDimensions[1] = body.clientWidth;
if(type == 'visual'){
return pageDimensions;
}
bodyOffsetWidth = body.offsetWidth;
bodyOffsetHeight = body.offsetHeight;
bodyScrollWidth = body.scrollWidth;
bodyScrollHeight = body.scrollHeight;
if (bodyOffsetHeight > pageDimensions[0]) {
pageDimensions[0] = bodyOffsetHeight;
}
if (bodyOffsetWidth > pageDimensions[1]) {
pageDimensions[1] = bodyOffsetWidth;
}
if (bodyScrollHeight > pageDimensions[0]) {
pageDimensions[0] = bodyScrollHeight;
}
if (bodyScrollWidth > pageDimensions[1]) {
pageDimensions[1] = bodyScrollWidth;
}
return pageDimensions;
} </script>
</head>
<body onload="showFix(true,false,'initTable');">
<table id="initTable">
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
</table> <!-- 复制的固定头两列 -->
<div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;">
<table>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
<tr bgcolor="red"><td>111</td><td>222</td></tr>
</table>
</div> <!-- 复制的固定头一行 -->
<div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;">
<table>
<tr bgcolor="blue">
<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
</tr>
</table>
</div> </body>
</html>
table的列固定的更多相关文章
- 关于JS、JQ首行首列固定展示
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行 JQ /** * ...
- 使用css固定table第一列
.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...
- bootstrap table实现iview固定列的效果
因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...
- tableZen maxHeight 解决方案 如果数据条数小于N，不进行高度设置，超过N条，直接设置高度，解决原生iview Table 对于右侧固定列，不能计算出正确数值的解决方案
tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案 if (thi ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- CSS样式实现表头和列固定
效果图:第一行和第一列固定 <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...
- table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
随机推荐
- Java集合框架，你了解多少？相信你看了这篇汇总一目了然！
相信大多数的程序员都知道,Dictionary.Vertor.Stack和Properties这些类被用来存储和操作对象组.但是他们缺少一个核心的主题的. 集合框架设计成要满足以下的几个目标 第一条: ...
- python入门之jieba库的使用
对于一段英文,如果希望提取其中的的单词,只需要使用字符串处理的split()方法即可,例如“China is a great country”. 然而对于中文文本,中文单词之间缺少分隔符,这是中文 ...
- 构造函数语义学——Default Constructor篇
构造函数语义学--Default Constructor 篇 这一章原书主要分析了:编译器关于对象构造过程的干涉,即在对象构造这个过程中,编译器到底在背后做了什么 这一章的重点在于 default c ...
- sublime text插件emmet自定义模板
首先要找到 snippets.json这个文件,路径是preferences>browse packages,看看有没有emmet目录. 如果没有,可能是您没有安装emmet插件,或者您安装了但 ...
- 机器学习：weka源码在eclipse的配置和异常VerifyError的解决
今天把weka源码导入eclipse,打算学习下weka源码,遇到一些问题,网上资料不足,自己总结下,希望为后来人铺路. 1)新建java项目,命名weka3-6 2)把weka-src.jar解压, ...
- #10056. 「一本通 2.3 练习 5」The XOR-longest Path
题目描述 有一棵带权树,求这些边组成的路径的最大异或和. Solution 考场 SPFA 神奇 70 分代码 #include<cstdio> #include<cstdlib&g ...
- 技术分享：Dapr，让开发人员更轻松地构建微服务应用
最近一直在学习微服务相关的技术.微服务架构已成为构建云原生应用程序的标准,并且可以预见,到2022年,将有90%的新应用程序采用微服务架构.微服务架构提供了令人信服的好处,包括可伸缩性,松散的服务耦合 ...
- 如何把应用程序移植到k8s
程序部署环境的容器化已经是大势所趋,微服务为容器化提供了广阔的应用舞台,k8s已经把Docker纳入为它的底层支撑容器引擎,一统江湖,成为了容器技术事实上的标准.一般的应用程序是不能直接拿来部署到容器 ...
- 关于在vue-cli脚手架中使用CDN引入element-ui不成功的坑
在前端开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决. 常见我们引入的element-ui库,在最近使用cdn引入时,无论如何都引入不成功,其他的如Vue.vue-r ...
- Shiro权限管理框架（四）：深入分析Shiro中的Session管理
其实关于Shiro的一些学习笔记很早就该写了,因为懒癌和拖延症晚期一直没有落实,直到今天公司的一个项目碰到了在集群环境的单点登录频繁掉线的问题,为了解决这个问题,Shiro相关的文档和教程没少翻.最后 ...