首页
所有分类
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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue实现菜单切换功能
May 08 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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) 胆机(1) ICOM(2) WR-800F(1) GTX1660(1) DE1102(1) R72E(1) R71E(1) i7 6700(1) React(6)
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
js继承实现方法详解
2016/12/16 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
深入理解javascript中的this
2021/02/08 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python中requests库session对象的妙用详解
2017/10/30 Python
详解python中eval函数的作用
2019/10/22 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python猜数字算法题详解
2020/03/01 Python
国际鲜花速递专家：Floraqueen
2016/11/24 全球购物
英国豪华文具和皮具配件经典老品牌：Smythson（斯迈森）
2018/04/19 全球购物
UNIONBAY官网：美国青少年服装品牌
2019/03/26 全球购物
什么是网络协议
2016/04/07 面试题
会计电算化应届生自荐信
2014/02/25 职场文书
绩效考核实施方案
2014/03/18 职场文书
运动会开幕式主持词
2014/03/28 职场文书
献爱心倡议书
2014/04/14 职场文书
消防安全责任书范本
2014/04/15 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
vue实现列表垂直无缝滚动
2022/04/08 Vue.js