《
基于IE与css的表格行头与多层列头锁定方法》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233a62013.htm
还有两点需要阐明：
定义一个有边框的div元素，并设置其overfloaw属性为scroll，保障该区域恒有一个垂直与水平转动条。
锁定表格列头时，需要斟酌两种情形单元格。一种是不锁定行头的单元格，此时只要要垂直方向不移动即可，见如下css代码：
table {
border-collapse: collapse; } 2、单元格锁定取舍器类
td.Locked
{
{
view plaincopy to clipboardprint? <html xmlns=" <head> <title>多层表头测试</title> <link type="text/css" rel="Stylesheet" href="lockedheaders.css" mce_href="lockedheaders.css" /> <mce: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; } --></mce:style><style type="text/css" mce_bogus="1"> 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" mce_style="text-align: center">12</td> <td style="text-align: left" mce_style="text-align: left">13</td> <td style="text-align: right" mce_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> Tag：表格 IE 表格 IE
}
}
需要指出，表格td元素的parentNode元素是tr，tr.parentNode元素是tbody，tbody.parentNode元素是table，所以td.parentNode.parentNode.parentNode.parentNode是定制的div元素，即当前表格区域。
另一种是锁定行头单元格时，这些是行头又是列头的单元格必需双向锁定，见如下css代码：
锁定表格行头时，请求行头的单元格程度方不移动，即区域挪动时重定位这些行头单元格的left边界值，见如下css代码：
--> [
网站建设之]基于IE与css的表格行头与多层列头锁定方式
div#DivContainer { overflow: scroll; border: solid 1px gray; }
使用了z-index坐标，并且是Locked类抉择器的z-index值最大，即最凑近阅读者； 在aspx中应用时，须要删除Visual Studio主动发生的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
td.HLocked /* 水平方向锁住单元格 */
{
（左边图锁定了行头与列头，右边图仅锁定列头）
在div中嵌入一个表格，设置collapse属性为collapse，满意单边框（合并边框）的外观。
下面是完全的css代码和htm演示代码，测试时需要树立一个IIS虚拟门路，拷贝css文件跟htm文件到该虚构路径中，而后通过浏览器浏览htm文件：
view plaincopy to clipboardprint? 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; }
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: 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;
1、肯定表格区域
需要设计三品种型的锁定单元格：垂直方向锁定单元格（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; }
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;
有很多的锁定或固定html表格表头的方法和技巧，本文先容的是一个基于IE和css的简易实现办法，基础思路为：使用div行级元素断定一个包括表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。
td.VLocked
}
(责任编辑：网站建设)
基于IE与css的表格行头与多层列头锁定方法相关文章