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的宽度或高度设置的比固定列的宽度或高度要小，否则是永远也看不到滚动的内容的。