纯CSS table表格 thead固定 tbody滚动效果
由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果!
实现思路:
将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式,给 tr 标签添加 table-layout:fixed; (这是核心)样式,由于 tbody 有了滚动条后,滚动条也要占位,又会导致 tbody 和 thead 不对齐,所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话,可以把滚动条的宽度设置为0px,滚动条就没有了。
下面是效果图,具体完整实例代码也在下面:
本文由知识库于2021-09-16发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3811.html
上一篇数据存储设计主要包括哪些(结构化数据存储方式)
下一篇局域网服务器域名怎么设置(服务器域名注册步骤)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台