css样式,锁定表头,只在IE浏览器下可以使用,没有兼容性
2014-07-15 21:24
204 查看
css样式,锁定表头,只在IE浏览器下可以使用,没有兼容性
这里需要注意table的宽度和高度,需要根据行数和列数乘以相应的宽高得出,总之如果没有设定宽高的话就惨了,数据行列多的时候就挤在一起了
,这个我没有在具体项目中用过,不过还好,如果想有兼容性的话,可以看我的文章:js方式锁定表头
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style>
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
td{
width:120px;
}
</style>
</head>
<body>
<div id="scrollDiv" style="width: 1000px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 500px;">
<table id='accountTable' width='2000' height='700' cellpadding='0' cellspacing='0'
style='table-layout: auto' bordercolor='lightgrey'>
<tbody>
<tr class="FixedTitleRow">
<td class="FixedTitleColumn">
ID0</td>
<td class="FixedTitleColumn">
CK0</td>
<td class="FixedTitleColumn">
Code0</td>
<td class="FixedTitleColumn">
Descirption0</td>
<td class="FixedTitleColumn">
TOL0</td>
<td>
XS0</td>
<td >
SS0</td>
<td>
MS0</td>
<td>
DS0</td>
<td>
BS0</td>
<td>
XL0</td>
<td>
ML0</td>
<td>
DL0</td>
<td>
EM0</td>
<td>
BM0</td>
<td>
XS0</td>
<td >
SS0</td>
<td>
MS0</td>
<td>
DS0</td>
<td>
BS0</td>
<td>
XL0</td>
<td>
ML0</td>
<td>
DL0</td>
<td>
EM0</td>
<td>
BM0</td>
</tr>
<tr>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这里需要注意table的宽度和高度,需要根据行数和列数乘以相应的宽高得出,总之如果没有设定宽高的话就惨了,数据行列多的时候就挤在一起了
,这个我没有在具体项目中用过,不过还好,如果想有兼容性的话,可以看我的文章:js方式锁定表头
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style>
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
td{
width:120px;
}
</style>
</head>
<body>
<div id="scrollDiv" style="width: 1000px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 500px;">
<table id='accountTable' width='2000' height='700' cellpadding='0' cellspacing='0'
style='table-layout: auto' bordercolor='lightgrey'>
<tbody>
<tr class="FixedTitleRow">
<td class="FixedTitleColumn">
ID0</td>
<td class="FixedTitleColumn">
CK0</td>
<td class="FixedTitleColumn">
Code0</td>
<td class="FixedTitleColumn">
Descirption0</td>
<td class="FixedTitleColumn">
TOL0</td>
<td>
XS0</td>
<td >
SS0</td>
<td>
MS0</td>
<td>
DS0</td>
<td>
BS0</td>
<td>
XL0</td>
<td>
ML0</td>
<td>
DL0</td>
<td>
EM0</td>
<td>
BM0</td>
<td>
XS0</td>
<td >
SS0</td>
<td>
MS0</td>
<td>
DS0</td>
<td>
BS0</td>
<td>
XL0</td>
<td>
ML0</td>
<td>
DL0</td>
<td>
EM0</td>
<td>
BM0</td>
</tr>
<tr>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td class="FixedDataColumn">
88</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
<td>
22</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
<tr>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
111</td>
<td class="FixedDataColumn">
1111</td>
<td class="FixedDataColumn">
This is Test</td>
<td class="FixedDataColumn">
1</td>
<td>
001</td>
<td>
002</td>
<td>
003</td>
<td>
004</td>
<td>
005</td>
<td>
006</td>
<td>
007</td>
<td>
008</td>
<td>
009</td>
<td>
010</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
相关文章推荐
- 安装了dns且可以正常工作为什么还有"没有可以使用的"DNS服务器"的错误
- GemBox.ExcelLite破解版,可以在没有安装Office的情况,使用.net代码操作Excel文件
- SQL SERVER的锁机制(二)——概述(锁的兼容性与可以锁定的资源)
- 如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下:
- 很漂亮的按钮css样式(没有用到图片,可直接拷贝代码使用)
- 使用了博客园的备份后得到一个xml文件,不知道有没有css或者xslt文件可以在本地阅读文章,在网上找了半天也没有找到解决办法,难道要自己写?
- 在使用jquery时间控件的时候无论怎么设置readonly都没有效果,折腾了N久才知道了这个属性,希望可以为同样有过苦恼的童鞋有些帮助
- XenServer没有自己的文件系统,也就没有自己的ISO Libery,给我们创建虚拟机带来了不少困扰,使用正文这个方法可以不用先安装FileServer
- 解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法【记录下来,以后可以使用】
- SQL SERVER的锁机制(二)——概述(锁的兼容性与可以锁定的资源)
- 怎样解决CSS样式使用注释后在IE浏览器中不起作用
- 在Windows XP下是否可以使用Ctrl+Alt+Del键锁定计算机?
- 使用Repeater可以绘制表头、表内、表尾比较复杂的表格
- 很漂亮的按钮css样式(没有用到图片,可直接拷贝代码使用)
- 使用 Windows API可以实现某些控件接口没有提供的功能
- 在Windows XP下是否可以使用Ctrl+Alt+Del键锁定计算机?
- 有数据库apps权限,但是没有oracle EBS 帐户, 可以用以下方法建立一个用户使用:
- 面向最终用户的Web应用的兼容性设计:为在Windows(XP 2000 98)下屏幕分辨率为1024*768或800*600使用IE浏览器(IE6, IE5)的中国用户设计
- win8默认使用IE浏览器打开QQ空间,通过如下设置可以更改浏览器
- SQL Server 中没有For循环,可以使用while循环代替 .