React+Antd修改Table组件滚动条样式的操作代码
作者:苦逼的猿宝
这篇文章主要介绍了React+Antd修改Table组件滚动条样式的操作代码,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
版本
Antd @5.x.x
React @18.x.x
Tsx
<Table dataSource={SocrePaMing.length > 0 ? SocrePaMing : []} columns={tableScoreColumns} rowKey="attribute" pagination={false} className="custom-table" scroll={{ y: 400 }} />
Css
.ant-table-body { scrollbar-width: auto; scrollbar-color: auto; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgb(219, 219, 219); }
效果
到此这篇关于React+Antd修改Table组件滚动条样式的文章就介绍到这了,更多相关react antd 滚动条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!