Ant Design Vue的Table组件设置scroll属性时，表头去掉滚动条

一秒时光之恋笑

已于 2022-03-17 16:55:59 修改

阅读量6k

点赞数 6

分类专栏： ant-design-vue CSS 滚动条文章标签： vue.js 前端 css3 css

于 2022-03-17 16:41:54 首次发布

本文链接：https://blog.csdn.net/qq_35269556/article/details/123553618

版权

ant-design-vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

滚动条

2 篇文章

订阅专栏

本文介绍了如何通过CSS调整去除Ant Design表格固定头部的垂直滚动条，修复边框问题，并保持美观，同时处理`bordered`属性对阴影的影响。关键代码和逐步解决方案都在文中详细展示。

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

未去除之前效果：

去除后效果：

只需要去除header的 overflow: scroll属性即可

使用代码：

>>> .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden!important;
  margin-bottom: 0!important;
  padding-right: 6px;
}

效果如图：

最右侧没有边框，因为：最后一个th右边框颜色透明了，我们给他设置上边框颜色

>>> .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child {
  border-right-color: #e8e8e8!important;
}

效果如图：

我这里给table加的有bordered属性，去掉bordered效果如下：

这就比较完美了，但是如果加上bordered属性，边框外的阴影就比较丑了，如何去掉呢，很简单，

代码如下：

>>> .ant-table-header {
  background: #fff;
}

最后效果如下图：

完成代码如下：

<style scoped>
  /*去除表头垂直滚动条 begin*/
  >>> .ant-table-fixed-header .ant-table-scroll .ant-table-header {
    overflow: hidden!important;
    margin-bottom: 0!important;
    padding-right: 6px;
  }
  >>> .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child {
    border-right-color: #e8e8e8!important;
  }
  >>> .ant-table-header {
    background: #fff;
  }
  /*去除表头垂直滚动条 end*/
</style>