antd5版本修改Table组件滚动条样式-编程知识

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

news/2024/11/18 15:38:46/文章来源:https://www.cnblogs.com/wen-web/p/18374031

因为项目需求，要将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;}
　　　　　　}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/785440.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

ThinkPHP6同步千万级流水数据

ThinkPHP6定时任务同步千万级流水数据多数据源配置自定义指令定时同步单次1000条 <?php declare (strict_types = 1);namespace app\command\SyncDtaTask;use think\console\Command; use think\console\Input; use think\console\Output; use think\Exception; use thi…

AtCoder Beginner Contest 047

A - Fighting over Candies 简单排序。 #include <bits/stdc++.h>using namespace std; using i64 = long long;int main() {ios::sync_with_stdio(false), cin.tie(nullptr);vector<int> a(3);cin >> a[0] >> a[1] >> a[2];sort(a.begin(), a.e…

CRTP 和静态多态

c++古典面试问题之一：面向对象编程三大特性--封装，继承，多态 c++古典面试问题之二：如何实现多态-- 当基类指针指向派生类对象，并通过这个指针调用在派生类中被重写的虚函数基于上述知识点，今天我们讲下另一种多态实现方式：CRTP (curiously recurring template pattern)虚…

小程序直传oss

直传使用 const host = <host>; const signature = <signatureString>; const ossAccessKeyId = <accessKey>; const policy = <policyBase64Str>; const key = <object name>; const securityToken = <x-oss-security-token>; const fi…

呼死你手机轰炸机（29021243

基于短信轰炸机原理研究并实现之后又研究起了电话轰炸机实现原理其实大同小异，最终的区别的用户在进行短信发送并未收到短信的情况下【产生的原因有网络信号原因、用户手机自动屏蔽原因】可以利用第三方平台提供的语音验证码进行发送这种情况也是通过fiddler进行抓包…

pygame物体碰撞

代码：#coding=utf-8import os,sys,re,time import pygame import random import math from win32api import GetSystemMetrics from tkinter import messageboxpygame.init() pygame.display.set_caption("我的游戏")percent = 0.6 screen_width = GetSystemMetrics…

NSSCTF [HNCTF 2022 Week1]Interesting_include

NSSCTF [HNCTF 2022 Week1]Interesting_include<?php //WEB手要懂得搜索 //flag in ./flag.phpif(isset($_GET[filter])){$file = $_GET[filter];if(!preg_match("/flag/i", $file)){die("error");}include($file); }else{highlight_file(__FILE__); }…

02-HTMLJS相关练习

1、使用 html 写一个网页，要求满足以下条件：（1）网页中含有任意一张图片，图片路径使用绝对路径（这里绝对路径无法识别故使用相对路径），鼠标悬停在图片时出现“马哥教育”文本，且点击图片可跳转至马哥教育官方页面（2）网页中包含账号、密码登录，且账号提前定义好是 …

织梦dedecms判断文章是否为推荐文章

{dede:arclist row=10 typeid=typeid titlelen=36 runphp=yes} {dede:loop value=$dls}{if preg_match(/c/, $fields[flag])}<strong>推荐文章: </strong>{/if}<a href="[field:arcurl]" title="[field:title]">[field:title]</a>…

织梦dedecms判断缩略图是否存在

{dede:field name=litpic runphp=yes} if(!empty(@me)) {<img src="@me" alt="缩略图" /> } else {<img src="/images/no-image.png" alt="默认图片" /> } [/dede:field]扫码添加技术【解决问题】专注中小企业网站建设、网…

织梦dedecms判断子菜单是否存在

{dede:channeltype typeid=typeid runphp=yes} if(@list != ) {<ul class="submenu">{dede:loop value=@list}<li><a href="[url]">[@typename]</a></li>{/dede:loop}</ul> } else {"没有子菜单" } {/dede:…

使用SiliconCloud快速体验SimpleRAG（手把手教程）

使用SiliconCloud快速体验SimpleRAG（手把手教程）SiliconCloud介绍 SiliconCloud 基于优秀的开源基础模型，提供高性价比的 GenAI 服务。不同于多数大模型云服务平台只提供自家大模型 API，SiliconCloud上架了包括 Qwen、DeepSeek、GLM、Yi、Mistral、LLaMA 3、SDXL、Instant…

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

相关文章