为了布局的美观度需要在html中固定标题列、标题头,本文整理了一些相关实现技巧,经测试还不错,感兴趣的朋友可以参考下,希望对你有所帮助
代码如下:
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 |