首页
所有分类
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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
vue ssr 指南详读
Jun 29 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
PL-365(1) 修复(2) 1 Tube Radio(1) YB217(1) 德生(17) 东方红(1) TECSUN(1) YB235(1) 海燕B411(1) 再生机(1)
You might like
PHP里的单例类写法实例
2015/06/25 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
window.open的功能全解析
2006/10/10 Javascript
jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
2011/06/27 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
JavaScript中的Array 对象（数组对象）
2016/06/02 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容（下）
2018/04/18 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
ES6 class类链式继承，实例化及react super(props)原理详解
2020/02/15 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python购物车程序简单代码
2018/04/18 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Bose英国官方网站：美国知名音响品牌
2020/01/26 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
秋季运动会加油词
2015/07/18 职场文书
《灰雀》教学反思
2016/02/19 职场文书
五年级作文之成长
2019/09/16 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL