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

网络整理 - 07-27

(左边图锁定了行头与列头,右边图仅锁定列头)

有许多的锁定或固定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元素的parentNode元素是tr,tr.parentNode元素是tbody,tbody.parentNode元素是table,所以td.parentNode.parentNode.parentNode.parentNode是定制的div元素,即当前表格区域。

锁定表格列头时,需要考虑两种情况单元格。一种是不锁定行头的单元格,此时只需要垂直方向不移动即可,见如下css代码:

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-index: 30; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 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;

}

还有两点需要说明:

  • 使用了z-index坐标,并且是Locked类选择器的z-index值最大,即最靠近浏览者;
  • 在aspx中使用时,需要删除Visual Studio自动产生的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">行。
  • 下面是完整的css代码和htm演示代码,测试时需要建立一个IIS虚拟路径,拷贝css文件和htm文件到该虚拟路径中,然后通过浏览器浏览htm文件:

    view plaincopy to clipboardprint?

  • {   
  • }   
  • table    
  • {   
  • }   
  • td    
  • {   
  • }   
  • {   
  •     top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);    
  •     left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);    
  • }   
  • {   
  • }   
  • {   
  • }  
  • view plaincopy to clipboardprint?

  •   
  •        
  •   
  •     tr { height: 26px; }   
  •     td         { font-size: 10pt; text-align: right; }   
  •     td.Locked  { font-size: 10pt; }   
  •     td.HLocked { font-size: 10pt; }   
  •     td.VLocked { font-size: 10pt; }   
  •        
  •     td         { font-size: 10pt; text-align: right; }   
  •     td.Locked  { font-size: 10pt; }   
  •     td.HLocked { font-size: 10pt; }   
  •     td.VLocked { font-size: 10pt; }   
  •   
  •   
  •   
  •   
  •   
  •        
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •        
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •