首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

固定表格行列(expression)在IE下适用

Posted in Javascript onJuly 25, 2013

这是一种在IE下适用的固定行列的方法.其具体代码如下: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<style> 
.FixedTitleRow 
{ 
position: relative; 
top: expression(this.offsetParent.scrollTop); 
z-index: 10; 
width: 80px; 
background-color: #FFCC00; 
} 
.FixedDataColumn 
{ position: relative; 
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); 
background-color: #E6ECF0; 
} 
.FixedColumnAndRows{ 
position: relative; 
top: expression(this.offsetParent.scrollTop); 
left: expression(this.offsetParent.scrollLeft); 
z-index: 20; 
width: 80px; 
background-color: #FFCC00; 
} 
td{word-break : keep-all;} 
</style> 
</head> 
<body> 
<div id="scrollDiv" style="width:500; height:150; overflow: auto; cursor: default; display: inline; position: absolute;"> 
<table width="100%" cellpadding='0' cellspacing='0' bordercolor='lightgrey' border="1" style="table-layout:fixed"> 
<tr bgcolor="#FFCC00" style="font-size:12px; text-align:center; font-weight:bold;height:25px;"> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
</table> 
</body> 
</html> 
/* 这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的!*/

固定表格行列(expression)在IE下适用

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
js form表单input框限制20个字符，10个汉字代码实例
Apr 12 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 #Javascript
不使用浏览器运行javascript代码的方法
Jul 24 #Javascript
js展开闭合效果演示代码
Jul 24 #Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 #Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 #Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 #Javascript
javascript中比较字符串是否相等的方法
Jul 23 #Javascript
安健(1) 德劲1107(1) YH-R296(1) ICF-SW100(1) A254(1) SRF-40W(1) 华普R-96(1) 上海永华(1) SRF-M100(1) SRF-22W(1)
You might like
yii实现创建验证码实例解析
2014/07/31 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
究竟什么是Node.js？Node.js有什么好处？
2015/05/29 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
layui数据表格实现重载数据表格功能(搜索功能）
2019/07/27 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Pytorch框架实现mnist手写库识别（与tensorflow对比）
2020/07/20 Python
如何用Python 实现全连接神经网络（Multi-layer Perceptron）
2020/10/15 Python
美国领先的汽车轮胎和轮毂供应商：TireBuyer
2016/07/21 全球购物
英国领先的男士美容护发用品公司：Mankind
2016/08/31 全球购物
LN-CC中国：高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
购房协议书范本
2014/04/11 职场文书
python基础之函数的定义和调用
2021/10/24 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python