首页
所有分类
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 函数使用说明
Apr 07 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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) 巫师(1) 艾尔登法环(1) 小缇娜的奇幻之地(1) 暴雪(1) 我的世界(1) Docker(14) 最终幻想(1) 帝国时代(1)
You might like
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
深入理解JavaScript系列（26）：设计模式之构造函数模式详解
2015/03/03 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
学生自我鉴定范文
2013/10/04 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
会务接待方案
2014/02/27 职场文书
电子信息工程自荐信
2014/05/26 职场文书
关爱老人标语
2014/06/21 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年技术员工作总结
2015/04/10 职场文书
个人承诺书格式范文
2015/04/29 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书