ant design table去掉表頭滾動條及滾動條樣式修改

ant table 組件的滾動條樣式不太好看 考慮調整一下 而且表頭 和x軸還出現了滾動條
原滾動條樣式:
在這裏插入圖片描述

  1. 去掉表頭的滾動條
.ant-table-fixed-header .ant-table-scroll .ant-table-header {
      overflow: hidden;
      height: 70px;
    }
  1. 去掉x軸的滾動條就比較容易了 直接設置table的scroll(不設置x即可):
scroll={{y: 350}}
  1. 修改滾動條的樣式:
.ant-table-body{
      &::-webkit-scrollbar {
        height: 5px;
        width: 10px;
        overflow-y: auto;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(89, 89, 89, 0.2);
        background: #939392;
      }
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: #f0f2f5;
      }
    }

效果:
在這裏插入圖片描述
這個是借鑑大佬的 附上鍊接:
https://blog.csdn.net/jane_96/article/details/82906068

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章