ITPub博客

首页 > 应用开发 > IT综合 > 如何在 web 页面中实现类似 excel 固定表头 / 标题行的效果?

如何在 web 页面中实现类似 excel 固定表头 / 标题行的效果?

IT综合 作者:xiaohuihui 时间:2020-06-12 16:47:19 0 删除 编辑

1、 如果没有报表工具或者使用的开源报表工具中没有固定表头功能时,可以使用代码开发方式实现,例如可以通过 jQuery 方式实现固定表头效果,实现思路如下:

用 div 替换 table,将要冻结的表头放入 thead 中,用 thead 绝对定位达到固定的目的,使用 overflow-y:hidden 属性达到滚动效果。

但是这种方式或者其他插件方式都存在一些问题:

对于左表头的固定支持性比较弱;

容易出现单元格错位现象;

对于动态表头的支持性比较弱。

2、 有报表工具的话,可以直接使用报表工具提供的固定表头功能,例如: 像 excel 一样轻松冻结 web 报表表头 (锁定表头)
简单两步就可以实现。

固定表头效果预览:

imagepng


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69900830/viewspace-2698028/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2018-12-01

  • 博文量
    326
  • 访问量
    194651