tbody加滚动条实现思路:
1.把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。
2.把thead的tr设置成display:block。
3.因为都设置成block所以要给td手动添加宽度。
4.考虑到 tbody 产生了滚动条,这时会影响tbody以及thead的宽度,可以采用针对tbody设置::-webkit-scrollbar进行解决。
自定义滚动条:
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-thumb {
/* 滚动条 拖动条 */
background: linear-gradient(70deg, #8ecaeb 0%, #1585c2 50%, #3574c7 100%);
border-radius: 6px;
}
::-webkit-scrollbar-track {
/* 滚动条背景槽 */
background-color: #90d1f1;
border-radius: 6px;
}