table固定表头行及列,其中行包含合并单元格

---恢复内容开始---

PS:文中代码大部分不出自原创,在原有的基础上修改成自己想要的效果给大家参考,如有不妥,请联系我删除。

该效果由纯html+css实现,经测试不支持IE,需要支持IE版本参考下一篇文章。

---恢复内容结束---

全部代码如下:

  -----------------------------------------------------------------------代码-begin-----------------------------------------------------------------------------------





Demo














序号


名称


单位类别















































































































在编总人数 在岗人员 不在岗人员 编外人员 离休、退休(职)
校级干部


在编变化


离休变化


退休变化


退职变化

小计
专技
管理
工勤
在岗人数 本单位在岗 外借 不在岗人数 内退 长病假 其他不在岗人员
编外人员小计
退休返聘 劳务派遣
小计
专技
管理
工勤
小计
专技
管理
工勤
社区 挂编
支教教师
其他外借
小计
专技
管理
工勤
小计
专技
管理
工勤
小计
专技
管理
工勤
小计
专技
管理
工勤
小计
教师
非教师
小计
专技
管理
工勤
离休
退休
退职
教师
旁系列
教师
旁系列
教师
旁系列
小计
专技
管理
工勤
小计
专技
管理
工勤
小计
专技
管理
工勤
教师
旁系列
教师
旁系列
教师
旁系列
教师
旁系列
教师
旁系列
教师
旁系列
教师
旁系列
教师
旁系列





































































45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中
45
名称一
初中












































































































































































































































































































































































































































































































































































































































































































































42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
84 41 8 7 12 83 41 7 7 8 83 41 7 7 8 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 2 1 2 2 2 2 2 2 2 1 2 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 34 2 2 2 2 2
45 57 4 1 1 44 57 4 1 2 44 57 4 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 2 2 2 1 1 2 2 2 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 135 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 -87 -1 -214
54 43 8 1 2 54 43 8 1 2 54 43 8 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 5 5 1 4 2 2 2 2 2 7 243 2 3 2 2 2
54 41 5 1 1 55 48 5 1 1 54 47 5 1 1 2 2 2 2 2 2 2 2 2 2 2 1 1 2 2 2 1 1 2 2 2 2 2 2 2 2 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 254 2 3 -1 2 1
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
87 74 8 2 3 84 74 7 2 3 84 74 7 2 3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 2 1 2 2 2 2 2 2 2 1 2 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 243 2 3 2 2 2
83 75 3 2 3 82 74 3 2 3 82 74 3 2 3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 1 2 2 2 2 2 2 2 2 1 1 2 2 2 2 2 2 2 2 2 2 1 1 2 2 2 2 2 1 222 2 4 2 2 2
42 42 2 2 2 42 42 2 2 2 31 31 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 424 2 1 2 2 2
84 41 8 7 12 83 41 7 7 8 83 41 7 7 8 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 2 1 2 2 2 2 2 2 2 1 2 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 34 2 2 2 2 2
45 57 4 1 1 44 57 4 1 2 44 57 4 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 2 2 2 1 1 2 2 2 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 135 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 -87 -1 -214


 -----------------------------------------------------------------------代码-end-----------------------------------------------------------------------------------

实现效果如下:

不滚动效果:

table固定表头行及列,其中行包含合并单元格_第1张图片

向下滚动效果:

table固定表头行及列,其中行包含合并单元格_第2张图片

向左右滑动效果:

table固定表头行及列,其中行包含合并单元格_第3张图片

 

转载于:https://www.cnblogs.com/Beata-hu/p/9950902.html

你可能感兴趣的:(javascript)