React+Antd修改Table组件滚动条样式的操作代码
更新时间:2024年12月16日 10:16:03 作者:苦逼的猿宝
这篇文章主要介绍了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 滚动条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
react-router4 配合webpack require.ensure 实现异步加载的示例
本篇文章主要介绍了react-router4 配合webpack require.ensure 实现异步加载的示例,非常具有实用价值,需要的朋友可以参考下2018-01-01React组件实例三大核心属性State props Refs详解
组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性2022-12-12关于React中使用window.print()出现页面无响应问题解决记录
这篇文章主要介绍了React中使用window.print()出现页面无响应问题解决记录,首先问题原因可能是操作了document但是并未进行销毁(可能是),具体问题解决思路参考下本文吧2021-11-11基于Webpack5 Module Federation的业务解耦实践示例
这篇文章主要为大家介绍了基于Webpack5 Module Federation的业务解耦实践示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12解决React报错`value` prop on `input` should&
这篇文章主要为大家介绍了React报错`value` prop on `input` should not be null解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12
最新评论