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

来源：互联网发布：mac边充电边用好吗编辑：程序博客网时间：2024/05/13 18:40

（左边图锁定了行头与列头，右边图仅锁定列头）

有许多的锁定或固定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代码：

{

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">行。

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

div#DivContainer
{
overflow: scroll; border: solid 1px gray;
}
table
{
border-collapse: collapse;
}
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;
}
td.Locked /* 水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */
{
z-index: 30; position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
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.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);
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;
}

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>多层表头测试</title>
<style type="text/css">
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; }
</style>
</head>
<body>
<div id="DivContainer" style="width: 400px; height: 260px;">
<table id = "Report">
<tr>
<td class="Locked" colspan="4">Column1</td>
<td class="VLocked" rowspan="3">Column5</td>
<td class="VLocked" rowspan="3">Column6</td>
<td class="VLocked" rowspan="3">Column7</td>
<td class="VLocked" rowspan="3">Column8</td>
</tr>
<tr>
<td class="Locked" colspan="2">Column11</td>
<td class="Locked" colspan="2">Column12</td>
</tr>
<tr>
<td class="Locked">Column111</td>
<td class="Locked">Column112</td>
<td class="Locked">Column121</td>
<td class="Locked">Column122</td>
</tr>
<tr>
<td class="HLocked">Row01</td>
<td class="HLocked">Row01A</td>
<td class="HLocked">Row01B</td>
<td class="HLocked">11</td>
<td style="text-align: center">12</td>
<td style="text-align: left">13</td>
<td style="text-align: right">14</td>
<td>15</td>
</tr>
<tr>
<td class="HLocked">Row02</td>
<td class="HLocked">Row02A</td>
<td class="HLocked">Row02B</td>
<td class="HLocked">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td class="HLocked">Row03</td>
<td class="HLocked">Row03A</td>
<td class="HLocked">Row03B</td>
<td class="HLocked">31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td class="HLocked">Row04</td>
<td class="HLocked">Row04A</td>
<td class="HLocked">Row04B</td>
<td class="HLocked">41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td class="HLocked">Row05</td>
<td class="HLocked">Row05A</td>
<td class="HLocked">Row05B</td>
<td class="HLocked">51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td class="HLocked">Row06</td>
<td class="HLocked">Row06A</td>
<td class="HLocked">Row06B</td>
<td class="HLocked">61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
<tr>
<td class="HLocked">Row07</td>
<td class="HLocked">Row07A</td>
<td class="HLocked">Row07B</td>
<td class="HLocked">71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
</tr>
<tr>
<td class="HLocked">Row08</td>
<td class="HLocked">Row08A</td>
<td class="HLocked">Row08B</td>
<td class="HLocked">81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
</tr>
<tr>
<td class="HLocked">Row09</td>
<td class="HLocked">Row09A</td>
<td class="HLocked">Row09B</td>
<td class="HLocked">91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
</tr>
</table>
</div>
</body>
</html>