固定WEB Table表頭表列的一種簡易方法

 事例：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>