未去除之前效果:
去除后效果:
只需要去除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;}最后效果如下图:
完成代码如下:
<stylescoped>/*去除表头垂直滚动条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>