CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式

2022-12-26 21:33| 来源: 网络整理| 查看: 265

CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式原创

程序员秃头之路 2022-12-21 10:40:03 博主文章分类：Web前端 ©著作权

文章标签 html css css3 CSS 控件文章分类虚拟化云计算

©著作权归作者所有：来自51CTO博客作者程序员秃头之路的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、最终效果图

CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式_css

二、关键代码

html 代码：

项目账号项目名称作业地址模拟结果

CSS 出现滚动条并使表格不变形：

.tbd { display: block; color: #fff; text-align: center; height: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch; /*滚动更流畅*/ }

.table_info table thead, .tbd tr{ display: table; width: 100%; table-layout: fixed; } .table_info table thead { background-color: #004453; /* width: calc(100% - 6px); */ /*减去默认滚动条的宽度，让thead 与tbody 对齐*/ }

CSS 修改滚动条样式：

/* 滚动条样式 */ table tbody::-webkit-scrollbar { width: 6px; } table tbody::-webkit-scrollbar-thumb{ background-color:#01F5F1; border-radius: 5px; } table tbody::-webkit-scrollbar-track{ background-color:#004453; } table tbody::-webkit-scrollbar-thumb:hover { background-color:rgb(17, 177, 174) } table tbody::-webkit-scrollbar-thumb:active { background-color:rgb(9, 136, 134) }滚动条样式::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

赞收藏评论分享举报

上一篇：JqGrid自定义搜索，点击之后刷新了整个页面原因

下一篇：解决Springboot使用Redis反序列化遇到的类型转换异常

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章