el-table隐藏滚动条和滚动条所占的gutter宽度

最新推荐文章于 2025-03-05 11:18:02 发布

是我呀！卡布达

最新推荐文章于 2025-03-05 11:18:02 发布

阅读量1.6k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_40745445/article/details/131307792

版权

该文章提供了一种方法，通过CSS样式来隐藏ElementUI的el-table组件中的滚动条，并调整gutter宽度为0，以优化表格显示。具体实现包括设置::-webkit-scrollbar及其thumb和track的样式，以及使用/deep/选择器来隐藏gutter列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table隐藏滚动条和滚动条所占的gutter宽度

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 0px;
  }

  /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background: #eee;
  }

  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
  }
  /deep/.el-table th.gutter{
    display: none;
    width:0
  }
  /deep/.el-table colgroup col[name='gutter']{
    display: none;
    width: 0;
  }

  /deep/.el-table__body{
    width: 100% !important;
  }