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;}
相关推荐
前端(从入门到入土)3 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗30 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
AA-代码批发V哥37 分钟前
CSS之布局详解指南
css
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js