首页
所有分类
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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
理解JS事件循环
Jan 07 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
夯基础之手撕javascript继承详解
Nov 09 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) 负载均衡(6) 远程控制(1) 生成缩略图(1) http(6) Windows server 2016(6) https(7) IIS(7) Windows server 2019(5) Telnet(1)
You might like
php面向对象全攻略 （六）__set() __get() __isset() __unset()的用法
2009/09/30 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
手机号码，密码正则验证
2014/09/04 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
python相似模块用例
2016/03/04 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python中的for循环
2018/09/28 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python实现FM算法解析
2019/06/18 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
详解利用python识别图片中的条码（pyzbar）及条码图片矫正和增强
2020/11/17 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
初一体育教学反思
2014/01/29 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
作风大整顿心得体会
2014/09/10 职场文书
横店影视城导游词
2015/02/06 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
MySQL sql模式设置引起的问题
2022/05/15 MySQL