来源：https://css-tricks.com/custom-scrollbars-in-webkit/
https://www.cnblogs.com/vicky-li/p/css.html
image.png
效果图
image.png
一.结构和样式
1.整体有一个main,里面最上第一个div就是scrollbar
上下小图标做成一个，调整位置
<div class="main">
<div class="scrollbar"></div>
</div>
.content .main .scrollbar{
float:right;
width:16px;
height:616px;
}
.content .main::-webkit-scrollbar{
width: 16px;
height:16px;
}
/*滑块*/
.content .main::-webkit-scrollbar-thumb{
background:url(../images/scrollbar_thumb.png) center no-repeat;
}
/*轨道*/
.content .main::-webkit-scrollbar-track{
background:url(../images/scrollbar_track.png) center no-repeat;
}
.content .main::-webkit-scrollbar-button:vertical:start{
background:url(../images/up_bg.png) center top no-repeat;
}
.content .main::-webkit-scrollbar-button:vertical:end{
background:url(../images/up_bg.png) center bottom no-repeat;
}
滚动条需要建立在表格内容父级的div里，如下图
绿色背景是表格本身宽高，粉色是绿色table父级div，滚动条需要建在父级div里，和table是同级
image.png
自定义滚动条
https://www.jianshu.com/p/da5d52630f36
image.png
image.png
image.png
tbody单独滚动的代码
效果图：
代码有缺陷问题，主要思想是把thead,tbody变成display:block,给tbody加高度，加滚动
单元格加padding，但是会出现如下情况，文字不一致就不行
image.png
.chart{
padding:20px;
width: 100%;
}
.table{
width: 100%;
color:#777777;
font-size:14px;
text-align: center;
border-collapse:collapse;
border-spacing:0;
}
.table thead,.table tbody,.table tbody tr{
display: block;
max-width:573px;
width:100%;
}
.table tbody{
height: 170px;
overflow-y: auto;
}
.table thead th,.table tbody>tr>td{
width: 25%;
height:30px;
border:1px solid #e2e2e2;
vertical-align: middle;
}
.table tbody>tr>td{
padding:0 10px;
}
.table thead th{
padding:0 40px;
}
.table th{
font-weight: bold;
background:#fafafa;
}
.scroll{
width: 100%;
height: 100%;
overflow: scroll;
}
.scrollbar{
width: 6px;
height:100%;
position:absolute;
z-index:50;
top:20px;
right:20px;
float:right;
}
.table tbody::-webkit-scrollbar{
width: 6px;
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-track{
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-thumb{
background-color:green;
}
<div class="chart">
<table class="table table_1">
<thead class="table_header">
<th>订单编号</th>
<th>工件物码</th>
<th>工步名称</th>
<th>状态</th>
</thead>
<tbody id="table_data">
</tbody>
</table>
</div>
正确方法
来源：https://www.cnblogs.com/wangEddy/p/8074535.html
image.png
# [CSS 设置table下tbody滚动条](https://www.cnblogs.com/wangEddy/p/8074535.html)
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;//仍有伸缩性
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
css layout属性
image.png
image.png
image.png
正确效果如下
image.png
解法
1.整体tbody display:block, tr,thead,display:table,让tbody整体可以滚动
- tr,thead,display:table具有伸缩性
3.tbody固定高度，overflow-y:auto
4.tr,thead width:100% table-layout:fixed;固定宽度跟着内容走
5.滚动条会压缩tbody的宽度，用jq写一个变量+宽度，内容超出时，让tbody自动加宽和thead一样宽。这里注意用parseInt($("tr").css("width"));来解析数字，去掉px,记住变量加减乘除，赋属性给变量，要保持字符串一致性。
6.滚动条直接加在tbody上
代码
//html
<table class="table table_1">
<thead class="table_header">
<th>订单编号</th>
<th>工件物码</th>
<th>工步名称</th>
<th>状态</th>
</thead>
<tbody id="table_data">
</tbody>
</table>
//css
.table{
width: 100%;
color:#777777;
font-size:14px;
text-align: center;
border-collapse:collapse;
border-spacing:0;
}
.table thead,.table tbody tr{
display:table;
width:98%;
table-layout:fixed;
}
.table tbody{
width: 100%;
height: 170px;
display:block;
overflow-y: auto;
}
.table thead th,.table tbody tr td{
height:30px;
border:1px solid #e2e2e2;
vertical-align: middle;
}
.table th{
font-weight: bold;
background:#fafafa;
}
.table tbody::-webkit-scrollbar{
width: 6px;
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-track{
background-color:#fafafa;
}
.table tbody::-webkit-scrollbar-thumb{
background-color:green;
}
//js
$(function(){
"use strict";
var rowCount=$("#table_data").find("tr").length;
var x=parseInt($("tr").css("width"));
var y= x + 1 + "px";
if(rowCount > 5){
$("tr").css("width",y);
}
});
