下面的方法有点是简单并且行列固定效果很好(IE6+有效,Chrome不支持,FF未测)
缺点是数据量稍大的时候会比较卡。
注意:
不能将div的宽度或高度设置的比固定列的宽度或高度要小,否则是永远也看不到滚动的内容的。
<html>
<head>
<style>
.FixedTitleRow{ position: relative;top: expression(this.offsetParent.scrollTop); z-index: 10; background-color: #E6ECF0;}
.FixedTitleColumn { position: relative; left: expression(this.parentElement.offsetParent.scrollLeft); }
.FixedDataColumn { position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0;}
</style>
</head>
<body>
<div id="scrollDiv" style="width: 200px; overflow: auto;display: inline;position: absolute; height: 200px;">
<table id='accountTable' width='350' height='230' cellpadding='0' cellspacing='0' border='1' style='table-layout: auto' bordercolor='lightgrey'>
<tr class="FixedTitleRow">
<td class="FixedTitleColumn">ID0</td>
<td>XS0</td>
<td >SS0</td>
<td>MS0</td>
<td>DS0</td>
<td>BS0</td>
</tr>
<tr>
<td class="FixedDataColumn">88</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td class="FixedDataColumn"> 111</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td class="FixedDataColumn"> 111</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
</table>
</div>
</body>
</html>