<div class="tableList" id="tableListStyle">
<el-table
class="customer-table"
border
:data="tableData"
style="width: 100%"
:header-cell-style="{
fontSize: '16px',
background:
'linear-gradient(to bottom, #1c3665, #0d1937, #1c3665)',
color: '#3c98cf',
borderColor: '#1f283e',
}"
:cell-style="{ borderColor: '#1f2e4c' }" //设置里面边框的颜色
>
<el-table-column prop="road" label="路段1" width="180">
</el-table-column>
<el-table-column prop="status" label="状态" width="150">
</el-table-column>
......
</div>
css
.tableList {
height: 700px;
overflow-y: scroll;
padding: 0 8px;
}
// 滚动条整体样式
.tableList::-webkit-scrollbar {
width: 10px;
/*height: 4px;*/
}
// 定义滑块颜色、内阴影及圆角
.tableList::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #36b3cd;
}
//滑动槽的背景颜色
.tableList::-webkit-scrollbar-track-piece {
background-color: #142a37;
}