ant table 組件的滾動條樣式不太好看 考慮調整一下 而且表頭 和x軸還出現了滾動條
原滾動條樣式:
- 去掉表頭的滾動條
.ant-table-fixed-header .ant-table-scroll .ant-table-header {
overflow: hidden;
height: 70px;
}
- 去掉x軸的滾動條就比較容易了 直接設置table的scroll(不設置x即可):
scroll={{y: 350}}
- 修改滾動條的樣式:
.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