最近有这样一个需求，给vue页面中的table表格加一个滚动条，并修改样式。废话不多说直接上代码
这是table表格
<table><thead><td style="width:26%">车次</td><td style="width:31%">乘警姓名</td><td style="width:43%">联系电话</td></thead><tbody><tr v-for="(cj,i) in cjList" :key="i" @click="goToZtc(cj)"><td style="width:26%">{{h}}</td><td style="width:31%">{{cj.xm}}</td><td style="width:43%">{{cj.phone.slice(0,12)}}</td></tr></tbody></table>
注意：这里必须得有tbody这个标签,有的没有，我们得加上，接下来就是css样式的修改了
/* 添加table滚动条 */table {border-collapse: collapse;width: 100%;}tbody {display: block;overflow-x: hidden;overflow-y: auto;height: 220px;}thead,tbody tr {display: table;width: 100%;table-layout: fixed;word-break: break-all;}
这里都比较简单，可以自行调试看看效果，主要是border-collapse: collapse;这个样式。
接下来就是设置滚动条样式的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);}
这个是将滚动条设置的比较细一点的，还有一些滚动条颜色之类的样式，可自行调试
展示一下效果图：右边的这个滚动条就是最终的效果，之前是没有滚动条的。
