css原生table添加滚动条后改变滚动条的大小后让thead与tbody 对齐

HTML:

html 复制代码
<table class="layui-table cic-table">
   <thead>
       <tr>
           <td class="td-title"></td>
           <td class="td-title row-title"></td>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td class="td-title"></td>
           <td class="first-title"></td>
       </tr>
   </tbody>
</table>

CSS:

css 复制代码
.cic-table tbody {
   	max-height: 330px;
    display: block;
    overflow-y: auto;
}
.cic-table thead, .cic-table tbody tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.cic-table thead {
    width: calc(100% - 3px); /*减去默认滚动条的宽度,让thead 与tbody 对齐*/
}
/*改变滚动条的宽度和样式*/
.cic-table tbody::-webkit-scrollbar { width: 3px;}
.cic-table tbody::-webkit-scrollbar { width: 3px;}
.cic-table tbody::-webkit-scrollbar-track{background-color:#f0f0f0;}
.cic-table tbody::-webkit-scrollbar-thumb{background-color:#CCCCCC;}
.cic-table tbody::-webkit-scrollbar-thumb:hover {background-color:#CCCCCC;}
.cic-table tbody::-webkit-scrollbar-thumb:active {background-color:#CCCCCC;}
相关推荐
whysqwhw7 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode7 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰7 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss7 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship7 小时前
网页截图API-Npm工具包分享
前端
Jedi Hongbin7 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix7 小时前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年7 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛8 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん8 小时前
微信小程序如何进行分包处理?
前端·小程序