vue.js table表格添加滚动条以及修改滚动条样式

最新推荐文章于 2024-08-23 17:32:08 发布

craftsman2020

最新推荐文章于 2024-08-23 17:32:08 发布

阅读量5.7k

点赞数 1

分类专栏： Vue 文章标签： Vue 表格滚动条 CSS样式前端开发

原文链接：https://blog.csdn.net/weixin_43120343/article/details/106944122

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近有这样一个需求，给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);
}