首页
所有分类
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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 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) Logrotate(1) ip连接(1) T-SQL(1) timestamp(1) GTID(1) 重复数据(2) 临时表(1) 批处理(1)
You might like
php实现json编码的方法
2015/07/30 PHP
为你总结一些php信息函数
2015/10/21 PHP
php实现的xml操作类
2016/01/15 PHP
php轻松实现文件上传功能
2016/03/03 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
js HTML5多图片上传及预览实例解析（不含前端的文件分割）
2016/08/26 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
python中requests模块的使用方法
2015/04/08 Python
利用python求相邻数的方法示例
2017/08/18 Python
python3个性签名设计实现代码
2018/06/19 Python
详解python的四种内置数据结构
2019/03/19 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python+opencv实现车道线检测
2021/02/19 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐：Great Value Vacations
2019/03/30 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
工商管理本科生求职信
2014/07/13 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014年质量工作总结
2014/11/22 职场文书
慰问信模板
2015/02/14 职场文书
python小程序之飘落的银杏
2021/04/17 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis