Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条
未去除之前效果:去除后效果:只需要去除header的 overflow: scroll属性即可使用代码:>>> .ant-table-fixed-header .ant-table-scroll .ant-table-header {overflow: hidden!important;margin-bottom: 0!important;padding-right: 6px;}
·
未去除之前效果:
去除后效果:
只需要去除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>
更多推荐
已为社区贡献3条内容
所有评论(0)