·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 基于IE与css的表格行头与多层列头锁定方法

【如有意向点此提交需求】关于我们

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

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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

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

}

 

还有两点需要说明：

  1. 使用了z-index坐标，并且是Locked类选择器的z-index值最大，即最靠近浏览者；
  2. 在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文件：

view plaincopy to clipboardprint?

  1. div#DivContainer   
  2. {   
  3.     overflow: scroll; border: solid 1px gray;   
  4. }   
  5. table    
  6. {   
  7.     border-collapse: collapse;    
  8. }   
  9. td    
  10. {   
  11.     position: relative; padding: 5px;   
  12.     border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;   
  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: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;   
  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: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;   
  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: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;   
  33. }  

 

view plaincopy to clipboardprint?

  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head>  
  3.        
  4.     <title>多层表头测试</title>  
  5. <link type="text/css" rel="Stylesheet" href="lockedheaders.css" mce_href="lockedheaders.css" />  
  6. <mce:style type="text/css"><!--   
  7.     tr { height: 26px; }   
  8.     td         { font-size: 10pt; text-align: right; }   
  9.     td.Locked  { font-size: 10pt; }   
  10.     td.HLocked { font-size: 10pt; }   
  11.     td.VLocked { font-size: 10pt; }   
  12.        
  13. --></mce:style><style type="text/css" mce_bogus="1">    tr { height: 26px; }   
  14.     td         { font-size: 10pt; text-align: right; }   
  15.     td.Locked  { font-size: 10pt; }   
  16.     td.HLocked { font-size: 10pt; }   
  17.     td.VLocked { font-size: 10pt; }   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div id="DivContainer" style="width: 400px; height: 260px;">  
  22. <table id = "Report">  
  23.   <tr>  
  24.     <td class="Locked" colspan="4">Column1</td>  
  25.        
  26.     <td class="VLocked" rowspan="3">Column5</td>  
  27.     <td class="VLocked" rowspan="3">Column6</td>  
  28.     <td class="VLocked" rowspan="3">Column7</td>  
  29.     <td class="VLocked" rowspan="3">Column8</td>  
  30.   </tr>  
  31.   <tr>  
  32.     <td class="Locked" colspan="2">Column11</td>  
  33.     <td class="Locked" colspan="2">Column12</td>  
  34.   </tr>  
  35.   <tr>  
  36.     <td class="Locked">Column111</td>  
  37.     <td class="Locked">Column112</td>  
  38.     <td class="Locked">Column121</td>  
  39.     <td class="Locked">Column122</td>  
  40.   </tr>  
  41. <!--上面是表列头部分 -->  
  42.   <tr>  
  43.     <td class="HLocked">Row01</td>  
  44.     <td class="HLocked">Row01A</td>  
  45.     <td class="HLocked">Row01B</td>  
  46.     <td class="HLocked">11</td>  
  47.        
  48.     <td style="text-align: center" mce_style="text-align: center">12</td>  
  49.     <td style="text-align: left" mce_style="text-align: left">13</td>  
  50.     <td style="text-align: right" mce_style="text-align: right">14</td>  
  51.     <td>15</td>  
  52.   </tr>  
  53.   <tr>  
  54.     <td class="HLocked">Row02</td>  
  55.     <td class="HLocked">Row02A</td>  
  56.     <td class="HLocked">Row02B</td>  
  57.     <td class="HLocked">21</td>  
  58.     <td>22</td>  
  59.     <td>23</td>  
  60.     <td>24</td>  
  61.     <td>25</td>  
  62.   </tr>  
  63.   <tr>  
  64.     <td class="HLocked">Row03</td>  
  65.     <td class="HLocked">Row03A</td>  
  66.     <td class="HLocked">Row03B</td>  
  67.     <td class="HLocked">31</td>  
  68.     <td>32</td>  
  69.     <td>33</td>  
  70.     <td>34</td>  
  71.     <td>35</td>  
  72.   </tr>  
  73.   <tr>  
  74.     <td class="HLocked">Row04</td>  
  75.     <td class="HLocked">Row04A</td>  
  76.     <td class="HLocked">Row04B</td>  
  77.     <td class="HLocked">41</td>  
  78.     <td>42</td>  
  79.     <td>43</td>  
  80.     <td>44</td>  
  81.     <td>45</td>  
  82.   </tr>  
  83.   <tr>  
  84.     <td class="HLocked">Row05</td>  
  85.     <td class="HLocked">Row05A</td>  
  86.     <td class="HLocked">Row05B</td>  
  87.     <td class="HLocked">51</td>  
  88.     <td>52</td>  
  89.     <td>53</td>  
  90.     <td>54</td>  
  91.     <td>55</td>  
  92.   </tr>  
  93.   <tr>  
  94.     <td class="HLocked">Row06</td>  
  95.     <td class="HLocked">Row06A</td>  
  96.     <td class="HLocked">Row06B</td>  
  97.     <td class="HLocked">61</td>  
  98.     <td>62</td>  
  99.     <td>63</td>  
  100.     <td>64</td>  
  101.     <td>65</td>  
  102.   </tr>  
  103.   <tr>  
  104.     <td class="HLocked">Row07</td>  
  105.     <td class="HLocked">Row07A</td>  
  106.     <td class="HLocked">Row07B</td>  
  107.     <td class="HLocked">71</td>  
  108.     <td>72</td>  
  109.     <td>73</td>  
  110.     <td>74</td>  
  111.     <td>75</td>  
  112.   </tr>  
  113.   <tr>  
  114.     <td class="HLocked">Row08</td>  
  115.     <td class="HLocked">Row08A</td>  
  116.     <td class="HLocked">Row08B</td>  
  117.     <td class="HLocked">81</td>  
  118.     <td>82</td>  
  119.     <td>83</td>  
  120.     <td>84</td>  
  121.     <td>85</td>  
  122.   </tr>  
  123.   <tr>  
  124.     <td class="HLocked">Row09</td>  
  125.     <td class="HLocked">Row09A</td>  
  126.     <td class="HLocked">Row09B</td>  
  127.     <td class="HLocked">91</td>  
  128.     <td>92</td>  
  129.     <td>93</td>  
  130.     <td>94</td>  
  131.     <td>95</td>  
  132.   </tr>  
  133. </table>  
  134. </div>  
  135. </body>  
  136. </html>