表格的行列固定 css+div

    技术2022-05-12  17

    首先说明,这个方法只能在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>,这样就可以了。


    最新回复(0)