表格的行列固定 css+div

首先说明，这个方法只能在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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="fex_row">10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="fex_row">11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>

稍稍说明下，在做的过程我遇到的一个小问题，就是在行列交叉的地方不能很好的固定，于是加了一个class，把层叠顺序设在最上面，起初我是把这个class放到交叉的单元格里，这个单元格就有三个类属性，居然不能被执行，只好加了个<span>,这样就可以了。