基于IE与css的表格行头与多层列头锁定方法

  基于IE与css的表格行头与多层列头锁定方法
 
 
（左边图锁定了行头与列头，右边图仅锁定列头）
有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。
1、确定表格区域
定义一个有边框的div元素，并设置其overfloaw属性为scroll，保证该区域恒有一个垂直与水平滚动条。
div#DivContainer
{
    overflow: scroll; border: solid 1px gray;
}
在div中嵌入一个表格，设置collapse属性为collapse，满足单边框（合并边框）的外观。
 
table
{
    border-collapse: collapse;
}
2、单元格锁定选择器类
需要设计三种类型的锁定单元格：垂直方向锁定单元格（VLocked）、水平方向锁定单元格（HLocked）及双向锁定单元格（Locked），而一般表格内容单元格则设置其位置属性position为relative，见如下css代码：
td
{
    position: relative; padding: 5px; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
锁定表格行头时，要求行头的单元格水平方不移动，即区域移动时重定位这些行头单元格的left边界值，见如下css代码：
 
td.HLocked /* 水平方向锁住单元格 */
{
z-index: 10; position: relative;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
td.VLocked /* 垂直方向锁住单元格 */
{
z-index: 20; position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); font-size: 10pt; color: black; background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
另一种是锁定行头单元格时，这些是行头又是列头的单元格必须双向锁定，见如下css代码：
 
td.Locked
{
z-ind