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

最新推荐文章于 2020-05-21 13:57:30 发布

xddouble

最新推荐文章于 2020-05-21 13:57:30 发布

阅读量3.7k

点赞数

分类专栏： ASP.NET HTML Java CSS 文章标签： table web class div 报表

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

20 篇文章 0 订阅

订阅专栏

Java

18 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

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