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;}
相关推荐
灵感__idea16 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript