首页
所有分类
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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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
SnakeGame(1) 分词器(1) mediapipe(1) while(1) python小游戏(5) for(1) 贪吃蛇(2) cvzone(1) 无限迭代(1) 计算机视觉(2)
You might like
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP递归算法的简单实例
2019/02/28 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
许愿墙中用到的函数
2006/10/07 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
python del()函数用法
2013/03/24 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python实现密钥密码（加解密）实例详解
2020/04/26 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
英国历史最悠久的DJ设备供应商：DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
文明倡议书范文
2014/04/15 职场文书
岗位职责说明书
2014/05/07 职场文书
校园文明标语
2014/06/13 职场文书
工作所在部门证明
2014/09/21 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android