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%以上的界面需 ...
随机推荐
- 探讨Microsoft Solution Framework(MSF)框架下管理的秘密
hello,同学们,同胞们,同志们,同龄们,这样们,那样们,们们们,我又回来写“论文”了,半年时间没见我发布任何博文,是不是认为我被潜规则了啊,哈哈.我想死你们了.好了,废话不多说,进入今天主题: ...
- AppBoxFuture: 服务模型的在线调试
框架内的服务模型(ServiceModel)用于处理各类业务逻辑(如最简单的CRUD操作),在设计时以类似于伪代码的形式存在,发布时后端会通过Roslyn转换并编译为运行时代码.为了方便开发者更简 ...
- 利用WinRM实现内网无文件攻击反弹shell
利用WinRM实现内网无文件攻击反弹shell 原文转自:https://www.freebuf.com/column/212749.html 前言 WinRM是Windows Remote Mana ...
- css3实现饼状图进度及环形进度条
1 <!-- 饼图 --> <div class="pie"></div> <hr /> <!-- 环形图 --> &l ...
- Spring Boot项目中如何定制PropertyEditors
本文首发于个人网站:Spring Boot项目中如何定制PropertyEditors 在Spring Boot: 定制HTTP消息转换器一文中我们学习了如何配置消息转换器用于HTTP请求和响应数据, ...
- 5G：今天不谈技术，谈谈需求和应用
4G改变生活,5G改变社会.随着2019年5G手机的发布,5G时代已经拉开帷幕,无数嗅觉灵敏的投资人和创业者在研究5G行业的投资机会. 但是,市场研究侧重于技术细节与上游产业链设备投资居多,对于贴近消 ...
- MongoDB系列---入门安装操作
MongoDB 学习大纲: 1.MongoDB简介与其它数据库对比以及数据类型 2.MongoDB安装 3.MongoDB简单操作 环境要求: Linux 一.MongoDB简介 1 什么是Mongo ...
- JavaScript 变量作用域和声明提升
一.变量作用域 说到这个概念,不有自主的想到this,scope 这两个关键字. JavaScript的this总是指向一个明确的对象,这个对象是在执行的时候动态绑定的.通俗的说就是谁调用我,我的th ...
- EFCore--->> CodeFirst (Vs2019 Core3.0)的简单使用
直接上干货 EFCore--->> CodeFirst (Vs2019 Core3.0) 1: 安装下面3个对应的package(在Nuget控制台或者直接NuGet包查询点击下载,我喜欢 ...
- OptimalSolution(2)--二叉树问题（3）Path路径问题
一.在二叉树中找到累加和为指定值的最长路径长度 给定一棵二叉树和一个32位整数sum,求累加和为sum的最长路径长度.路径是指从某个节点往下,每次最多选择一个孩子节点或者不选所形成的节点链 -3 / ...