HTML 行列冻结

类似于excel 表格的行列冻结效果。

<style type="text/css">
.fixTop {Z-Index:102;position:relative; Top:expression(this.offsetParent.scrollTop);} 
.fixLeft {Z-Index:101;position:relative;left:expression(document.getElementById('scrollDiv').scrollLeft);background-color:#eeeeee;}
</style>
<div id="scrollDiv" style="height:200px;width:400px;overflow: auto;"> 
<table border=1 cellspacing="0" cellpadding="2">     
<tr class="fixTop" bgcolor="#eeeeee">
   <th class="fixLeft">LeftTop</th> 
   <th colspan="9" align=left >Top</th>
    </tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
<tr height="50">
<td class="fixLeft">Left</td>
<td class="fixLeft">abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    <td>abcdefg</td>
<td>abcdefg</td> <td>abcdefg</td>   <td>abcdefg</td>        <td>abcdefg</td>    
</tr>
</table> 
</div>