未去除之前效果:

去除后效果:

只需要去除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>

Logo

前往低代码交流专区

更多推荐