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%以上的界面需 ...
随机推荐
- 介绍ArcGIS中各种数据的打开方法——mxd（地图文档）
1.加载地图文档 在ArcGIS中,以mxd作为扩展名的文件叫地图文档. 地图文档中只是包含图层的引用,即存储当前地图的图层路径.符号.状态.修饰等信息,并不存储真实的数据层. ArcGIS Map中 ...
- msf之hash攻击
使用hashdump抓取密码(需要系统管理权限) 另外一个更强大的模块 smart_hashdump 如果目标是win7 就需要先绕过UAC 还可以使用msf内置的mimikatz抓取hash msv ...
- Android Studio 模拟器Intel 加速
Starting emulator for AVD 'Phone1'emulator: ERROR: x86 emulation currently requires hardware acceler ...
- [Luogu3878] [TJOI2010]分金币
题目描述 现在有n枚金币,它们可能会有不同的价值,现在要把它们分成两部分,要求这两部分金币数目之差不超过1,问这样分成的两部分金币的价值之差最小是多少? 输入输出格式 输入格式: 每个输入文件中包含多 ...
- JZOJ5771【NOIP2008模拟】遨游
Description MWH寒假外出旅游,来到了S国.S国划分为N个省,第i个省有Ti座城市,编号分别为Ci1,Ci2,……CiTi(各省城市编号不会重复).所有城市间有M条双向的道路连接 ...
- Django之CBV视图源码分析（工作原理）
1.首先我们先在urls.py定义CBV的路由匹配. FBV的路由匹配: 2.然后,在views.py创建一名为MyReg的类: 注意:该类必须继续View类,且方法名必须与请求方式相同(后面会详解) ...
- 学习了解Shiro框架
有关Shiro安全框架 实现权限的几种方式 1)通过表来实现 2)shiro框架 3)Spring Security框架 shiro有哪些主要功能 1.授权 访问控制的过程,即确定谁有权访问 2.身份 ...
- C#事件浅淡（1）
最近在写C#,感觉事件这个机制很好,可是怎么实现自己定义的事件呢?查了资料有的不全有的不完整,有的太深,自己写一个简单的例子. 原则 1,定义一个事件信息类(标准的都继承EventArgs) 2.定义 ...
- 收藏收藏：时隔一年，你关注的打造一个实用的TXT文本操作及日志框架，我们开源了，不再为程序写日志发愁（也支持.net core哦）
记得做这个框架是在2018年刚接触.net core的时候,那个时候为了能够专心的研究我开始不写博客了,但是学有所成并在公司运用了近一年的时间了,决定回来和各位分享我们所掌握的那星星点点的知识,希望可 ...
- typescript 入门教程二
ts中面向对象成员修饰符:public , private , protexted(ts官方网站:ts) 在ts中,默认的成员修饰符就是public public:是表示是公开的,在任何地方,都可以调 ...