固定表格行列(expression)
<!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,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的!*/
from: http://mirror-100.blog.163.com/blog/static/105633532008761743297/
固定表格行列(expression)的更多相关文章
- css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
- DataTables固定表格宽度（设置横向滚动条）
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑
1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...
- Css 设置固定表格头部，内容可滚动
效果图:
- LODOP打印超文本字符串拼接1 固定表格填充数值
前面的博文:Lodop打印控件传入css样式.看是否传入正确样式.Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印 ...
- thinkphp5: 循环输出表格，并固定表格单元宽度（过长省略号）
html: <table class="table table-striped" style='table-layout:fixed;'> <thead clas ...
- html总结：固定表格中单元格宽度
当然要提前设置好table的width值,然后再写这个,使得每列宽度都相等. <style> table { table-layout: fixed; } </style>
- css 固定HTML表格的宽度
在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸.有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看. 像下面的表格,正常的显示应该如下: 但是如果里 ...
随机推荐
- J2EE之ANT
Ant是一种基于Java的build工具.由一些内置任务组成.这些任务用于编译和运行java应用.创建文档.文件和文件夹的操作. 理论上来说.它有些类似于(Unix)C中的make ,但没有make的 ...
- CCCardinalSplineBy概念
cardianl 红衣主教 这个类是样条曲线动作, 其创建函数是CCCardinalSplineBy::create(float duration, cocos2d::CCPointArray *po ...
- PreferenceFragment 使用 小结
Perference也就是我们常说的偏好设置,首选项设置,能够自己主动保存一些数据,比如我们在上一次使用的时候的一些内容,则在下一次启动后依旧生效,而不须要再进行配置.当用户改变设置时,系统就会更新S ...
- 字符串最小表示法 O（n)算法
网上看了这篇文章后还是感觉有些地方讲的没有详细的证明所以添加了一点 红色字是博主写的 求字符串的循环最小表示: 上面说的两个字符串同构的,并没有直接先求出Min(s),而是通过指针移动,当某次匹配串长 ...
- C的xml编程-libxml2(转)
这里主要讲述libxml2在linux下的使用. (以下内容除了linux下的安装步骤是自己写的,其余均出自http://www.blogjava.net/wxb_nudt/archive/2007/ ...
- Win7 64位系统上配置使用32位的Eclipse(转)
Win7 64位系统上配置使用32位的Eclipse 博客分类: Eclipse eclipse 最近工作电脑换成了64位的win7系统,之前个人电脑上安装的jdk和Eclipse都是32位的.而新 ...
- php基础之 ->， =>，@，&,::，%符号
=> 是数组成员访问符号 -> 是对象成员访问符号 比如: $array = array("site map"=>"map.php"); // ...
- Hadoop配置文件-hdfs-site.xml
name value Description dfs.default.chunk.view.size 32768 namenode的http访问页面中针对每个文件的内容显示大小,通常无需设置. ...
- 已知要闪回的大致时间使用基于as of scn的闪回查询
基本判断出要恢复误操作的dml的时间可以使用如下的方法进行数据的恢复: example: 一.创建test表 -------create table flashback_asof------ crea ...
- ASP.NET MVC Json() 处理大数据异常解决方法 json MaxJsonLength
网上很多解决方案,在webconfig中添加,但是实践证明无效 <system.web.extensions> <scripting> <webServices> ...