table固定表头

     在项目中用到了table表格,数据较多出现了滚动条随之出现的问题就是,滚掉条滚动的时候,table表头也被“滚”跑了。想要修改这个问题只好采用固定table的表头了。

    固定表头一般都是一列表头,我这里是两列的表头,网上有类似的解决方法,不过我是采用的另一种方法。

    查找的资料解决办法:

 


 

 



 

  列头 列头
h1 h2 h3 h4 h5 565656
a 单元格2 单元格3 单元格4 单元格5  
b 单元格2 单元格3 单元格4 单元格5  
1 单元格2 单元格3 单元格4 单元格5  
2 单元格2 单元格3 单元格4 单元格5  
3 单元格2 单元格3 单元格4 单元格5  
4 单元格2 单元格3 单元格4 单元格5  
5 单元格2 单元格3 单元格4 单元格5 11;


 

页面样式为:

table固定表头_第1张图片

下面是我的解决方法,主要是把复合表头做成一个table放入到td里面。

在一下代码里还涉及到项目中的一些样式,这里并没有写下了,不过不影响功能

/*重点:固定行头样式*/

.scrollRowThead 
{
     position: relative; 
     left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
     z-index:0;
}
/*重点:固定表头样式*/
.scrollColThead {
     position: relative; 
     top: expression(this.parentElement.parentElement.parentElement.scrollTop);
     z-index:2;
}
/*行列交叉的地方*/
.scrollCR {
     z-index:3;
} 
.scrolltable
{
	border: #dadada 1px solid ; 
}
.scrollTable td{
 	border-left: #dadada 1px solid ; 
 	border-right: #dadada 1px solid ;
 	border-top: #dadada 1px solid ; 
 	border-bottom: #dadada 1px solid ;  
}
.tdBgcolor{
	background-color:#303030;
   }


 

html部分代码:

var table_Create = "" +
			 	"" +
			 	"	" +
			 	"		" +
			 	"		" +
			 	"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"		" +
				"	" ;

蓝色部分为复合表头部分。
最后的效果

 

 

table固定表头_第2张图片

 

不过这种样式在firefox上没有效果,所以如果要求在firefox上显示还需要在调试一下。当然如果遇到类似的问题也可以采取其他的方式,比如把表头做成一个div形式的(这样需要确定每一列的宽度)。根据自己的需要确定解决办法~~


 

你可能感兴趣的:(CSS,Html)

序号
发文日期
批准日期
主送单位
我方发文号
文件名称
发文部门
答复函件号
" + " " + " " + " " + " " + " " + "
回复情况
无需
回复

回复

回复
要求
回文
时间
实际
回文
时间
实际回文编号
编制人