首先说明,这个方法只能在IE下有效果,其他浏览器不行,下面附上代码
css部分:
<style type="text/css"><!--
/*行固定*/.fex_col{ top:expression(document.getElementById('values_div').scrollTop-1); position:relative ; z-index:3; background-color:#CCFFFF;}
/*列固定*/.fex_row{ LEFT: expression(document.getElementById('values_div').scrollLeft-1); POSITION: relative; z-index:2; background-color:#CCFFFF;}
/*行列交叉的地方*/.cr{z-index:1;}--></style>
HTML部分:
<div id="values_div" style="width:500px; height:300px; overflow:auto;"> <table border="0" width="800" height="500" cellspacing="0" cellpadding="2" > <tr class="fex_col" > <td class="fex_row"> <span class="cr">1</span> </td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td class="fex_row">2</td> <td>55</td> <td>55</td> <td>66</td> <td>44</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> </tr> <tr> <td class="fex_row">3</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> <td>55</td> </tr> <tr> <td class="fex_row">4</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> <td>66</td> </tr> <tr> <td class="fex_row">5</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> <td>77</td> </tr> <tr> <td class="fex_row">6</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> <td>88</td> </tr> <tr> <td class="fex_row">7</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> <td>99</td> </tr> <tr> <td class="fex_row">8</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr> <td class="fex_row">9</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="fex_row">10</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="fex_row">11</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
稍稍说明下,在做的过程我遇到的一个小问题,就是在行列交叉的地方不能很好的固定,于是加了一个class,把层叠顺序设在最上面,起初我是把这个class放到交叉的单元格里,这个单元格就有三个类属性,居然不能被执行,只好加了个<span>,这样就可以了。
