固定WEB Table表头表列的一种简易方法

来源：互联网发布：马蓉人品知乎编辑：程序博客网时间：2024/06/02 13:00

事例：http://www.try.net.cn/Blog/Show.asp?BlogID=256

　　最近在做公司人事报表中，同事要求将表的表头及左侧部分固定，然后可以通过拉动MOUSER看表中其他内容。网上查询了一下相关资料，^_^,做一个最简单的解决方案如下：

　　在表头中加入相关的样式：

.TABLE{    BORDER-RIGHT: 1px;    BORDER-TOP: 1px;    BORDER-LEFT: 1px;    BORDER-BOTTOM: 1px;    BORDER-COLLAPSE: collapse;    mso-border-alt: solid windowtext .5pt;    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt}.FixedRowCol{ z-index:999;   position: relative;   top: expression(this.offsetParent.scrollTop);   left: expression(this.offsetParent.scrollLeft);  }  .WH{  width:600;  height:500;  overflow: auto;   position: relative;}.FixedCol{   z-index:666;     position: relative;     left: expression(this.offsetParent.scrollLeft);    background:#CCFFFF;   }  .FixedRow{   position: relative;   top: expression(this.offsetParent.scrollTop); }

　　上述样式 FiexdRowCol,表式某一TD固定行也固定列，而FiexdRowCol表示固定行位置，FiexdCol固定列位置。定义后好，还需要在表的外面定一个Div,样式定义如下:

　　.Div { width:600; height:500; overflow: auto; position: relative;}

其中Width与Height表示需要定义的区域宽度与高度。

　　样式定义后，即可将框加结构定义如下:

    <div class="Div">    <table width="..." Height="...">     <tr>             <td class=FiexdRowCol>...</td>             <td class=FiexdRowCol>...</td>             <td class=FiexdRow>...</td>             <td class=FiexdRow>...</td>             .....             <td class=FiexdRow>...</td>    </tr>     <tr>             <td class=FiexdCol>...</td>             <td class=FiexdCol>...</td>             <td >...</td>             .....             <td>...</td>    </tr>     .......    <tr>             <td class=FiexdCol>...</td>             <td class=FiexdCol>...</td>             <td >...</td>             .....             <td>...</td>    </tr>    </div>