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

最新推荐文章于 2020-07-06 11:41:28 发布

转载最新推荐文章于 2020-07-06 11:41:28 发布 · 3.7k 阅读

文章标签：

#table #web #class #div #报表

ASP.NET 同时被 3 个专栏收录

20 篇文章

订阅专栏

Java

18 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文介绍了一种简单的方法来实现表格中表头和左侧部分的固定显示效果，通过使用特定的CSS样式，使得在滚动表格内容时，表头和左侧列始终保持可见。

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