锁定表头和固定列
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。因为方法很简单,就未封装成插件的形式,仅仅以代码方式发布。这里把自己做的方式写出来,以资纪念。
支持IE6+,FF3.6+,Opera9+,Chrome9+
一、实现方式
这里的准备使用4个table实现,具体如下图:
上图红色部分为要取出来的部分,蓝色部分为拼接后可以看到的部分。最终结果如下图
实现后效果:姓名
班级
成绩
主科
文科
理科
总分
语文数学英语政治历史地理物理化学生物
学生1 班级3 64 104 150 93
32
82
26
44
678
学生2 班级2 120 66 150 85
5
50
72
32
90 670
学生3 班级2 133 61
49
97
13
64
8
60 552
学生4 班级3 7
136 105 86
56
11
98
29
18 546
学生5 班级2
146 62
64
67
1
70
57
16 612
学生6 班级2 45
29
51
91
9
2
37
3
26
学生7 班级1 28
25 127 96
43
90
75
13
28 525
学生8 班级3 78
64
20
29
70
100
69
30
552
学生9 班级2 65
10
139
19
57
86
57
79
76
588
学生10 班级2 113
4
100
41
69
12
45
20
546
学生11 班级3 41
84
42
23
89
88
6
4
21
398
学生12 班级1 4
102 111
61
76
12
25
66
39
496
学生13 班级2 49
144
56
75
18
58
13
88
540
学生14 班级1 119
81
73
53
37
88
79
69
30
629
学生15 班级3 120
78
58
50
7
20
42
24
485
学生16 班级1 65
71
9
64
45
31
18
53
5
361
学生17 班级1 72
139
24
20
39
49
19
21
23
406
学生18 班级3 50
84
53
70
77
81
38
25
558
学生19 班级1 56
147 134
59
57
31
48
86
7
625
学生20 班级1 103
38
96
21
88
36
37
18
537
学生21 班级1 133 150
28
37
96
88
12
36
87
667
学生22
140
59
42
95
94
50
3
58
63
604
学生23 班级1 2
51
19
17
19
7
93
35
292
学生24 班级3 67
2
91
23
22
37
79
52
63
436
学生25 班级3 29
17
149
44
29
98
70
6
455
学生26 班级3 126 117 112
11
100
55
87
1
18
627
学生27 班级3
115 131
97
19
92
79
4
72
753
学生28 班级2 107
77
143
94
89
90
35
70
3
学生29 班级3 14
33
44
78
5
67
27
49
23
340
学生30 班级3 77
117
51
75
74
25
2
24
488
学生31 班级1 76
140 148
50
100
33
83
81
23
734
学生32 班级1 29
Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到 在打印表格的过程中,想必大家会遇到这样的问题,就是当表格特别大时,而且只有首页有表头,其他页都没有,这样就算打印出来也不利于查看,因为并不是每一页都有表头。有什么方法可以将表头固定起来,在打印之后每页都可以看到?这种结果是我们每个人的初愿吧!如果还有朋友不知道什么是表头、什么是表尾的话,那么可以看看下面的介绍。在 Excel2013中通过“顶端标题行”功能固定我们需要的部分(这里我们选择表头部分也就是 打印之后每页开头都会显示的部分),至于固定表尾Excel中没有类似固定表头那样的功能,我们还是采用页眉页脚的方法或者使用VBA宏来实现这个功能。好了,教程如下,有此需求的各位朋友不妨参考下。 什么是表头? 即表格中的第一个单元格。每张调查表按惯例总要有被调查者的简况反映,如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。这类问题一般排列在调查表开头部分,称“表头”。 如何打印固定表头 ①启动Excel2013,打开准备好的数据源,然后单击菜单栏--“页面布局”,单击“页面设置”选项卡里面的红色方框标记按钮。 ②切换到工作表标签,在打印标题中我们可以看到顶端标题行这一选项,点击右侧的按钮。
③这时会返回到表格主页面,我们选中表头部分,也就是你想要每页开头都显示的部分。
④确定,我们打印出来看看效果,每一页都显示了刚才选中的部分,实现了打印固定表头的目的。
什么是表尾? 与表头类似,是表格中最后的部分,一般都记录了作者所写的备注信息。 如何打印固定表尾 由于Excel没有类似打印固定表头那样的功能,所以我们普遍使用的还是页眉页脚的方法,这个方法简单实效,或者可以用VBA宏来实现这个功能。 ①插入页眉页脚,自定义页脚,在页脚输入框输入表尾内容,当然也可以直接复制粘贴。对于图片的话,我们需要慢慢调整尺寸。
常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown
【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit ( 父组件决定) hidden (隐藏) visible ( 显示) visibili ty:hidde n width 宽度 auto (自动决定) 数字 width:13 5 height 高度 auto (自动决定) 数字 height:1 00 z-index Z 轴高度(立体,是否在 另一个组件之上) auto (自动决定) 数字 z-index: 135 position 定位方式 absolute (绝对寻址-依窗口坐标,原点为父窗口左上角 ) relative (相对定位-以一般网页排列[后再根据坐标定位, 原点为定位后的位置) static (静态定位-以一般网页排列) position :absolut e top (对象的position 属 性须为absolute 或 relative ) 对象的Y 坐标(原点根 据postion 属性有所不 同) 数字 left (对象的 position 属性须为absolute 或 relative ) 对象的X 坐标(原点根 据postion 属性有所不 同) 数字
HTML5实现表头固定
序号 | 内容 |
---|
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |
1 | 我只是用来测试的 |