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

从网上看到的，正好项目中用到了，就拿来一用，但是这个有一个问题，就是完成后移动滚动条会出现分隔线混乱的情况，如图所示：

红色是正常的分隔线，绿色是混乱的，要是有解决方式的，希望能留言出出主意哦。

以下是原文：

 

有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。

1、确定表格区域

定义一个有边框的div元素，并设置其overfloaw属性为scroll，保证该区域恒有一个垂直与水平滚动条。

内容来自www.serverjia.cn电脑知识网

div#DivContainer { overflow: scroll; border: solid 1px gray; }

在div中嵌入一个表格，设置collapse属性为collapse，满足单边框（合并边框）的外观。 内容来自www.serverjia.cn电脑硬件知识网

table { border-collapse: collapse; }

2、单元格锁定选择器类

需要设计三种类型的锁定单元格：垂直方向锁定单元格（VLocked）、水平方向锁定单元格（HLocked）及双向锁定单元格（Locked），而一般表格内容单元格则设置其位置属性position为relative，见如下css代码：

td

{ 内容来自www.serverjia.cn电脑知识网

position: relative; padding: 5px; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;内容来自www.serverjia.cn电脑知识网

}

锁定表格行头时，要求行头的单元格水平方不移动，即区域移动时重定位这些行头单元格的left边界值，见如下css代码：

td.HLocked /* 水平方向锁住单元格 */ 内容来自www.serverjia.cn电脑硬件知识网

{

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;

}

内容来自www.serverjia.cn电脑硬件知识网

需要指出，表格td元素的parentNode元素是tr，tr.parentNode元素是tbody，tbody.parentNode元素是table，所以td.parentNode.parentNode.parentNode.parentNode是定制的div元素，即当前表格区域。

锁定表格列头时，需要考虑两种情况单元格。一种是不锁定行头的单元格，此时只需要垂直方向不移动即可，见如下css代码： 内容来自www.serverjia.cn电脑硬件知识网

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; 内容来自www.serverjia.cn电脑硬件知识网

}

另一种是锁定行头单元格时，这些是行头又是列头的单元格必须双向锁定，见如下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;内容来自www.serverjia.cn电脑硬件知识网

}

还有两点需要说明：

1. 使用了z-index坐标，并且是Locked类选择器的z-index值最大，即最靠近浏览者；
2. 在aspx中使用时，需要删除Visual Studio自动产生的行。

下面是完整的css代码和htm演示代码，测试时需要建立一个IIS虚拟路径，拷贝css文件和htm文件到该虚拟路径中，然后通过浏览器浏览htm文件：

1. div#DivContainer
2. {
3. overflow:scroll;border:solid1pxgray;
4. }
5. table
6. {
7. border-collapse:collapse;
8. }
9. td
10. {
11. position:relative;padding:5px;
12. border-top:solid0pxgray;border-bottom:solid1pxgray;border-left:solid0pxgray;border-right:solid1pxgray;
13. }
14. td.Locked/*水平与垂直方向锁住单元格,不随鼠标或滚动条移动*/
15. {
16. z-index:30;position:relative;
17. top:expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
18. left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
19. background-color:#cccccc;text-align:center;
20. border-top:solid0pxgray;border-bottom:solid1pxgray;border-left:solid0pxgray;border-right:solid1pxgray;
21. }
22. td.HLocked/*水平方向锁住单元格*/
23. {
24. z-index:10;position:relative;left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
25. background-color:#cccccc;text-align:center;
26. border-top:solid0pxgray;border-bottom:solid1pxgray;border-left:solid0pxgray;border-right:solid1pxgray;
27. }
28. td.VLocked/*垂直方向锁住单元格*/
29. {
30. z-index:20;position:relative;top:expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
31. background-color:#cccccc;text-align:center;
32. border-top:solid0pxgray;border-bottom:solid1pxgray;border-left:solid0pxgray;border-right:solid1pxgray;
33. }

Css代码

1. div#DivContainer
3. {
5. overflow: scroll; border: solid 1px gray;
7. }
9. table
11. {
13. border-collapse: collapse;
15. }
17. td
19. {
21. position: relative; padding: 5px;
23. border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
25. }
27. td.Locked /* 水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */
29. {
31. z-index: 30; position: relative;
33. top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
35. left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
37. background-color: #cccccc; text-align: center;
39. border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
41. }
43. td.HLocked /* 水平方向锁住单元格 */
45. {
47. z-index: 10; position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
49. background-color: #cccccc; text-align: center;
51. border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
53. }
55. td.VLocked /* 垂直方向锁住单元格 */
57. {
59. z-index: 20; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
61. background-color: #cccccc; text-align: center;
63. border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
65. }