首页
所有分类
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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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) ECharts(3) props(1) mixin(1) 相对定位(1) lua(3) postcss-px2rem(1) GTID(1) 绝对定位(1) ref(1)
You might like
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP通用检测函数集合
2011/02/08 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
Js动态创建div
2008/09/25 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
js DOM模型操作
2009/12/28 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript图片切换综合实例（循环切换、顺序切换）
2016/01/13 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jquery插件treegrid树状表格的使用方法详解（.Net平台）
2017/01/03 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python之字典添加元素的几种方法
2020/09/30 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
水芝澳美国官网：H2O Plus
2016/10/15 全球购物
泰国综合购物网站：Lazada泰国
2018/04/09 全球购物
北美最大的手工艺品零售商之一：Michaels Stores
2019/02/27 全球购物
广告设计应届生求职信
2014/03/01 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
python图像处理基本操作总结（PIL库、Matplotlib及Numpy）
2021/06/08 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python