element-ui 表格el-table滚动条优化

最新推荐文章于 2024-06-20 17:19:07 发布

安徒生讲评书

最新推荐文章于 2024-06-20 17:19:07 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 前端 H5 文章标签： css vue.js html5 javascript html

本文链接：https://blog.csdn.net/xiaobaige6084/article/details/117918153

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

主要是针对有border属性的表格，在显示滚动条时很别扭，做了简单的优化。

原表格：

优化后：

主要是修改css，代码如下：

<style>
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
  }
  ::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: rgba(0, 0, 0, .1);
      border-radius: 3px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }
  .el-table__header .has-gutter th.is-leaf:nth-last-child(2) {
      border-right: none;
  }
</style>