WEB开发网
开发学院WEB开发ASP.NET 基于IE与css的表格行头与多层列头锁定方法 阅读

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

 2009-03-26 17:42:17 来源:WEB开发网   
核心提示:(左边图锁定了行头与列头,右边图仅锁定列头) 有许多的锁定或固定html表格表头的方法和技术,基于IE与css的表格行头与多层列头锁定方法,本文介绍的是一个基于IE和CSS的简易实现方法,基本思路为:使用div行级元素确定一个包含表格的区域, 下面是完整的css代码和htm演示代码,测试时需要建立一个IIS虚拟路径,在

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

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

Tags:基于 IE css

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接