表头列头固定整理

View Code

  1 <head>
  2 
  3     <style>
  4 
  5         .FixedTitleRow
  6 
  7         {
  8 
  9             position: relative;
 10 
 11             top: expression(this.offsetParent.scrollTop);
 12 
 13             z-index: 10;
 14 
 15             background-color: #E6ECF0;
 16 
 17         }
 18 
 19        
 20 
 21         .FixedTitleColumn
 22 
 23         {
 24 
 25             position: relative;
 26 
 27             left: expression(this.parentElement.offsetParent.scrollLeft);
 28 
 29         }
 30 
 31        
 32 
 33         .FixedDataColumn
 34 
 35         {
 36 
 37             position: relative;
 38 
 39             left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
 40 
 41             background-color: #E6ECF0;
 42 
 43         }
 44 
 45     </style>
 46 
 47 </head>
 48 
 49 <body>
 50 
 51    <div id="scrollDiv" style=" 200px; overflow: auto;display: inline;position: absolute; height: 200px;">
 52 
 53         <table id='accountTable' width='350' height='230' cellpadding='0' cellspacing='0' border='1'
 54 
 55             style='table-layout: auto' bordercolor='lightgrey'>
 56 
 57                 <tr class="FixedTitleRow">
 58 
 59                     <td class="FixedTitleColumn"> ID0</td>
 60 
 61                     <td>XS0</td>
 62 
 63                     <td >SS0</td>
 64 
 65                     <td>MS0</td>
 66 
 67                     <td>DS0</td>
 68 
 69                     <td>BS0</td>
 70 
 71                 </tr>
 72 
 73                 <tr>
 74 
 75                     <td class="FixedDataColumn">88</td>
 76 
 77                     <td>22</td>
 78 
 79                     <td>22</td>
 80 
 81                     <td>22</td>
 82 
 83                     <td>22</td>
 84 
 85                     <td>22</td>
 86 
 87                 </tr>
 88 
 89                 <tr>
 90 
 91                     <td class="FixedDataColumn"> 111</td>
 92 
 93                     <td>006</td>
 94 
 95                     <td>007</td>
 96 
 97                     <td>008</td>
 98 
 99                     <td>009</td>
100 
101                     <td>010</td>
102 
103                 </tr>
104 
105                 <tr>
106 
107                     <td class="FixedDataColumn"> 111</td>
108 
109                     <td>006</td>
110 
111                     <td>007</td>
112 
113                     <td>008</td>
114 
115                     <td>009</td>
116 
117                     <td>010</td>
118 
119                 </tr>
120 
121         </table>
122 
123     </div>
124 
125 </body>
126 
127 </html>

行列固定常用方法有两种，上面的是一种，另一种则是用JS。

上面这种方法有点是简单并且行列固定效果很好(IE6+有效，Chrome不支持，FF未测)

缺点则是数据量稍大的时候会比较卡，如果有上万条数据的话，滚轮滚动都不流畅(也许PC配置好的话能差一些)

注意事项：

不要将div的宽度或高度设置的比固定列的宽度或高度要小，否则是永远也看不到滚动的内容的。