首页
所有分类
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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
js下将阿拉伯数字每三位一逗号分隔(如：15000000转化为15,000,000)
Jun 02 Javascript
jQuery中prepend（）方法使用详解
Aug 11 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 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
英国购物网站(954) 韩国购物网站(27) 爱尔兰购物网站(30) SLi Minor 2020(63) 中国购物网站(172) 巴西购物网站(71) 香港购物网站(84) 加拿大购物网站(185) 新加坡购物网站(41) 美国购物网站(1542)
You might like
php计算十二星座的函数代码
2012/08/21 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
利用phpexcel对数据库数据的导入excel（excel筛选）、导出excel
2017/04/27 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解
2017/05/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
了解前端理论：rscss和rsjs
2019/05/23 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python修改字典键（key）的方法
2019/08/05 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python 回溯法模板详解
2020/02/26 Python
Python中的整除和取模实例
2020/06/03 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
澳大利亚最好的厨具店：Kitchen Warehouse
2018/03/13 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
学生实习介绍信
2014/01/15 职场文书
三个儿子教学反思
2014/02/03 职场文书
环保小标语
2014/06/13 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript