最近有这样一个需求,给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%">{{cj.cch}}</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);
}
这个是将滚动条设置的比较细一点的,还有一些滚动条颜色之类的样式,可自行调试
展示一下效果图:右边的这个滚动条就是最终的效果,之前是没有滚动条的。