首页
所有分类
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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
Vite(1) cudn(1) dict(1) hook(1) 脚本(1) callback(1) expdp(1) 热力图(1) 字符画(1) cudnn(1)
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php使用unset()删除数组中某个单元（键）的方法
2015/02/17 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
django静态文件加载的方法
2018/05/20 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python文件拆分与重组实例
2018/12/10 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python英语单词测试小程序代码实例
2019/09/09 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
keras.layer.input()用法说明
2020/06/16 Python
JD Sports法国：英国篮球和运动时尚的领导者
2017/09/28 全球购物
乌克兰香水和化妆品网站：Notino.ua
2018/03/26 全球购物
英国乡村时尚和宠物用品专家：Pet & Country
2018/07/02 全球购物
中东奢侈品购物网站：Ounass
2020/09/02 全球购物
三个儿子教学反思
2014/02/03 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
校园公益广告语
2014/03/13 职场文书
网络编辑岗位职责
2014/03/18 职场文书
机关作风建设自查报告
2014/10/22 职场文书
升职自荐书
2019/05/09 职场文书