CSS实现table表头固定tbody显⽰垂直滚动条并⾃定义滚动条
样式
⼀、最终效果图
⼆、关键代码
html 代码：
<div class="table_info">
<table border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th>项⽬账号</th>
<th>项⽬名称</th>
<th>作业地址</th>
<th>模拟结果</th>
</tr>
</thead>
<tbody class="tbd">
<!-- 这⾥的数据是请求后台拼接上去的-->
</tbody>
</table>
</div>
CSS 出现滚动条并使表格不变形：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 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。