來源：https://css-tricks.com/custom-scrollbars-in-webkit/
https://www.cnblogs.com/vicky-li/p/css.html
image.png
效果圖
image.png
一.結(jié)構(gòu)和樣式
1.整體有一個(gè)main,里面最上第一個(gè)div就是scrollbar
上下小圖標(biāo)做成一個(gè)，調(diào)整位置
<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;
}
滾動(dòng)條需要建立在表格內(nèi)容父級(jí)的div里，如下圖
綠色背景是表格本身寬高，粉色是綠色table父級(jí)div，滾動(dòng)條需要建在父級(jí)div里，和table是同級(jí)
image.png
自定義滾動(dòng)條
http://www.itdecent.cn/p/da5d52630f36
image.png
image.png
image.png
tbody單獨(dú)滾動(dòng)的代碼
效果圖：
代碼有缺陷問題，主要思想是把thead,tbody變成display:block,給tbody加高度，加滾動(dòng)
單元格加padding，但是會(huì)出現(xiàn)如下情況，文字不一致就不行
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>訂單編號(hào)</th>
<th>工件物碼</th>
<th>工步名稱</th>
<th>狀態(tài)</th>
</thead>
<tbody id="table_data">
</tbody>
</table>
</div>
正確方法
來源：https://www.cnblogs.com/wangEddy/p/8074535.html
image.png
# [CSS 設(shè)置table下tbody滾動(dòng)條](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整體可以滾動(dòng)
- tr,thead,display:table具有伸縮性
3.tbody固定高度，overflow-y:auto
4.tr,thead width:100% table-layout:fixed;固定寬度跟著內(nèi)容走
5.滾動(dòng)條會(huì)壓縮tbody的寬度，用jq寫一個(gè)變量+寬度，內(nèi)容超出時(shí)，讓tbody自動(dòng)加寬和thead一樣寬。這里注意用parseInt($("tr").css("width"));來解析數(shù)字，去掉px,記住變量加減乘除，賦屬性給變量，要保持字符串一致性。
6.滾動(dòng)條直接加在tbody上
代碼
//html
<table class="table table_1">
<thead class="table_header">
<th>訂單編號(hào)</th>
<th>工件物碼</th>
<th>工步名稱</th>
<th>狀態(tài)</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);
}
});
