当前位置:

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

访客 2024-04-24 1122 0

未去除之前效果:

去除后效果:

只需要去除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>
  • 发表评论

    • 评论列表
    还没有人评论,快来抢沙发吧~