thead 固定，tbody 超出滚动条

最新推荐文章于 2024-06-17 16:30:49 发布

海绵泡泡~

最新推荐文章于 2024-06-17 16:30:49 发布

阅读量443

点赞数

分类专栏： Web 文章标签： css html

原文链接：https://www.cnblogs.com/zerozq/p/9138320.html

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：博客园 zeroz
https://www.cnblogs.com/zerozq/p/9138320.html

table tbody {
   max-height: 500px;
   display: block;
   overflow-y: auto;
}
table thead, table tbody tr {
   width: 100%;
   display: table;
   table-layout: fixed;
}
table thead {
   width: calc(100% - 3px); /*减去默认滚动条的宽度，让thead 与tbody 对齐*/
}
table tbody::-webkit-scrollbar { width: 3px;}  /*设置滚动条的宽度，让thead 与tbody 对齐*/

/*改变滚动条的宽度和样式*/
table tbody::-webkit-scrollbar { width: 3px;}
table tbody::-webkit-scrollbar-track{background-color:#f0f0f0；}
table tbody::-webkit-scrollbar-thumb{background-color:#CCCCCC;}
table tbody::-webkit-scrollbar-thumb:hover {background-color:#CCCCCC；}
table tbody::-webkit-scrollbar-thumb:active {background-color:#CCCCCC；}