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%以上的界面需 ...
随机推荐
- C语言--最大公约数
//辗转相除法 int main() { int a,b; int t; scanf("%d %d", &a,&b); ) { t = a%b; a = b; b ...
- feof() 函数判断不准确的问题
大家在读文件时应该碰到过这样的问题,while(!feof(fp)) 函数在读文件时会多循环一次,导致 fscanf() 函数多读了一次文件. 所以也就在输出的时候会产生一些乱码. 可以看看下面的代码 ...
- samba文件共享服务部署
1.安装samaba服务程序 yum install -y samba 2.查看smaba文件,由于注释空行较多,选择过滤 egrep -v "#|;|^$" /etc/samba ...
- veil-Evasion免杀使用
Veil-Evasion 是 Veil-Framework 框架的一部分,也是其主要的项目.利用它我们可以生成绕过杀软的 payload kali 上并未安装,下面我们来进行简单的安装.我们直接从 ...
- Linux常用高级命令
目录 linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.磁盘驱动器.键盘.鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的D ...
- [NOIp2018] luogu P5020 货币系统
还在补暑假作业. 题目描述 你有一个由 NNN 种面值的货币组成的货币系统.定义两个货币系统等价,当且仅当 ∀x∈N∗\forall x\in\N^*∀x∈N∗ 要么同时能被两个货币系统表示,要么同时 ...
- 推荐几个IT交流社区
博客园,csdn,掘金,StackOverflow(境外),v2ex,开源中国,简书,头条
- 数据结构c语言
这篇博客是为了对数据结构进行一系列的学习整理,包括线性表,栈和队列,串,数组和广义表,树和二叉树,图,动态储存管理,查找,内部排序,外部排序文件进行部分笔记的记录. 基本概念和术语 数据:是对客观事物 ...
- 三维动画形变算法（Mixed Finite Elements）
混合有限元方法通入引入辅助变量后可以将高阶微分问题变成一系列低阶微分问题的组合.在三维网格形变问题中,我们考虑如下泛函极值问题: 其中u: Ω0 → R3是变形体的空间坐标,上述泛函极值问题对应的欧拉 ...
- 从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...