html固定table标题,html固定标题列、标题头table具体实现代码

复制代码代码如下:

固定标题列、标题头table

table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}

table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}

table th{ background:#edd3d4; color:#a10333; border:#000 solid 1px; white-space:nowrap; height:21px; border-top:0px;border-left:0px;}

.t_left{width:30%; height:auto; float:left;border-top:1px solid #000;border-left:1px solid #000;}

/*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/

.t_r_content{width:100%; height:220px; background:#fff; overflow:auto;}

.cl_freeze{height:200px;overflow:hidden; width:100%;}

/* width 调整左边标题列宽度(左侧外观显示宽度); 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/

/* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */

/* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/

.t_r{width:69.5%; height:auto; float:left;border-top:1px solid #000; border-right:#000 solid 1px;}

.t_r table{width:1700px;}

.t_r_title{width:1720px;}/*宽度比 t_r table 大20px (至少大20，小了滚动条滑到右侧显示有问题)*/

.t_r_t{width:100%; overflow:hidden;}

.bordertop{ border-top:0px;}

function aa(){

var a=document.getElementById("t_r_content").scrollTop;

var b=document.getElementById("t_r_content").scrollLeft;

document.getElementById("cl_freeze").scrollTop=a;

document.getElementById("t_r_t").scrollLeft=b;

}

账号	姓名

1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	10
11	11
12	12
13	13
14	14
15	15
16	16
17	17
18	18
19	19
20	20

字段A	字段B	字段C	字段D	字段E	字段F

1	1	1	1	1	1
2	2	2	2	2	2
3	3	3	3	3	3
4	4	4	4	4	4
5	5	5	5	5	5
6	6	6	6	6	6
7	7	7	7	7	7
8	8	8	8	8	8
9	9	9	9	9	9
10	10	10	10	10	10
11	11	11	11	11	11
12	12	12	12	12	12
13	13	13	13	13	13
14	14	14	14	14	14
15	15	15	15	15	15
16	16	16	16	16	16
17	17	17	17	17	17
18	18	18	18	18	18
19	19	19	19	19	19
20	20	20	20	20	20