阅读 381

table表格横向的滚动条(讲解table滚动条事件)

纯CSS table表格 thead固定 tbody滚动效果

由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果!

实现思路:

将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式,给 tr 标签添加 table-layout:fixed; (这是核心)样式,由于 tbody 有了滚动条后,滚动条也要占位,又会导致 tbody 和 thead 不对齐,所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话,可以把滚动条的宽度设置为0px,滚动条就没有了。

下面是效果图,具体完整实例代码也在下面:

完整实例代码:



 

    
    
    
    纯CSS table表格 thead固定 tbody滚动
    

 

    
纯CSS table表格 thead固定 tbody滚动
序 号 姓 名 年 龄 性 别 手 机
001 Name 28 Mobile
002 Name 28 Mobile
003 Name 28 Mobile
004 Name 28 Mobile
005 Name 28 Mobile
006 Name 28 Mobile
007 Name 28 Mobile
008 Name 28 Mobile
【table,thead,tbody,tfoot】 colspan:合并行, rowspan:合并列
文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐