首页 > 其他分享 >antd5版本修改Table组件滚动条样式

antd5版本修改Table组件滚动条样式

时间:2024-08-22 15:48:37浏览次数:8  
标签:ant antd5 样式 滚动条 scrollbar table Table 4px

因为项目需求,要将Table组件的样式修改为UI图所给的效果,但是怎么写都不生效

最后发现在

 .ant-table的样式中设了scrollbar-color,只要把这里的样式设为scrollbar-color: auto;

然后再改.ant-table-body里面滚动条的样式,就可以了

      .ant-table-body{
            &::-webkit-scrollbar {
              background: rgba(0, 0, 0, 0);
              width: 4px;
              height: 4px;
            }
            /* 滚动条轨道的样式 */
            &::-webkit-scrollbar-track {
              background: #888 !important; /* 轨道背景颜色 */
              border-radius: 6px !important; /* 轨道圆角 */
            }
    
            /* 滚动条滑块的样式 */
            &::-webkit-scrollbar-thumb {
              background: rgba(37, 36, 36, 0.8);
              border-radius: 3px;
              width: 4px;
            }
      }

 

标签:ant,antd5,样式,滚动条,scrollbar,table,Table,4px
From: https://www.cnblogs.com/wen-web/p/18374031

相关文章

  • element plus el-table 合并行或列(根据列表数据动态合并第一列重复的单元格)
    http://element-plus.org/zh-CN/component/table.html#%E5%90%88%E5%B9%B6%E8%A1%8C%E6%88%96%E5%88%97 <scriptsetup>import{onMounted,ref}from'vue'import'./index.css'constobjectSpanMethod=({row,column,rowInde......
  • ant design vue 表格table 和复选框Checkbox结合 实现树形数据操作
    前言:最近在做一个权限管理的页面,需要配置权限。业务给的要求在表格里,展示权限以及编辑权限。然后根据权限数组,动态展示模块。页面需求:可以设定每个公司或者部门的单独权限,可以编辑保存权限主要实现:1.全选,反选(递归循环,every,some实现)2.子级选中其父级选中,父级取消子级也取消3.......
  • Element-ui table进阶使用
    最近项目有多个报表开发的需求,我采用的是凤翎前端组件框架(基于element-ui开发),大伙可以直接参考element-ui组件库文档,把标签中的fks替换为el即可。下面我会按顺序一一展开细说这些需求:1、有多级表头,合并单元格如下图所示,降雨量是顶级表头,下面是二三级表头,最后才是表身部分。多......
  • 异步编程CompletableFuture的一些使用demo
      publicstaticThreadPoolExecutorexecutor=newThreadPoolExecutor(5,5,5L,TimeUnit.SECONDS,newLinkedBlockingQueue<>(1000),newThreadPoolExecutor.CallerRunsPolicy());publicstaticvoidmain(String[]args)throwsException{Complet......
  • JS获取位置、滚动条、尺寸的总结
    鼠标位置page:pageX、pageY,当前鼠标距离页面的横纵坐标client:clientX、clientY,鼠标相对于视口的坐标offset:offsetX、offsetY,鼠标相对于事件源padding-box的坐标screen:screenX、screenY,鼠标相对于屏幕x、y,等同于clientX、clientYmovement:movementX、movementY,只在鼠标......
  • HashMap和HashTable的区别
    目录1.同步性2.性能3.空键和空值4.迭代器5.接口1.同步性(1)HashMap 是不同步的,意味着它不是线程安全的。多个线程可以同时访问HashMap,可能会导致数据不一致问题。如果在多线程环境中使用HashMap,通常需要外部同步。(2)HashTable 是同步的,意味着它是线程安全的......
  • 在 React 项目中 Editable Table 的实现
    在React项目中EditableTable的实现 我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:佳岚可编辑表格在数栈产品中是一种比较常见的表单数据交互方式,一般都支持动态的新增、删......
  • AI电商全流程:轻松掌握Stable Diffusion AI绘画技巧
    前言本课程将带你全面掌握人工智能AI绘画的全流程操作,特别是针对StableDiffusion的实战教学。无论你是初学者还是想要提升技能的从业者,这门保姆级教程都将为你提供详细的操作指导和实用技巧,帮助你在电商领域充分发挥AI的潜力。整理和输出教程属实不易,觉得这篇教程对你有......
  • Stable Diffusion绘画 | ControlNet应用-Tile(分块)—tile_resample(分块-重采样)
    前言PS:StableDiffusion安装与在线平台推荐,请在公众号内的消息对话框中,发送关键词**「xiaoyaoSD」**要想使用SD生成高品质图片,放大增加分辨率是必不可少的环节。tile_resample(分块-重采样)主要是将图片切分成很多个分块,并识别每个分块的信息,最终通过特定算法把分......
  • 【Stable Diffusion】关键词详解篇
    前言【StableDiffusion】关键词详解篇这里分享给大家一份Adobe大神整理的《AIGC全家桶学习笔记》,相信大家会对AIGC有着更深入、更系统的理解。有需要的朋友,可以点击下方免费领取!AIGC所有方向的学习路线思维导图这里为大家提供了总的路线图。它的用处就在于,你可......