首页 > 其他分享 >更改element-ul的表格底部滚动条

更改element-ul的表格底部滚动条

时间:2024-08-02 19:06:19浏览次数:11  
标签:__ el deep element 滚动条 ul wrapper table

/* 确保表格容器有足够的高度 */
::v-deep .el-table .el-table__fixed{
  overflow: hidden;
  height:auto !important;
  bottom:20px !important;
}

/* 普通列的滚动条样式 */
::v-deep .el-table__body-wrapper {
  padding-bottom: 10px; /* 调整底部 padding */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 20px; /* 设置滚动条的高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条的颜色 */
  border-radius: 10px;    /* 滚动条的圆角 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道的颜色 */
  border-radius: 10px;       /* 滚动条轨道的圆角 */
}

/* 固定列的滚动条样式 */
::v-deep .el-table__fixed-body-wrapper {
  padding-bottom: 20px; /* 调整底部 padding */
}

::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar {
  height: 200px; /* 设置滚动条的高度 */
}

::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条的颜色 */
  border-radius: 10px;    /* 滚动条的圆角 */
}

::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道的颜色 */
  border-radius: 10px;       /* 滚动条轨道的圆角 */
}

 

加高之后的效果:

 

标签:__,el,deep,element,滚动条,ul,wrapper,table
From: https://www.cnblogs.com/fan-wang/p/18339425

相关文章

  • java如何避免NullPointerException(空指针异常,NPE)
    本文将简单的介绍nep以及如何避免npe1.npe简介空指针异常(NullPointerException)意思是指java中的异常类。当应用程序试图在需要对象的地方使用null时,抛出该异常。这种情况包括:调用null对象的实例方法。访问或修改null对象的字段。将null作为一个数组,获得其长度......
  • Vulnhub靶场DC-9练习
    目录0x00准备0x01主机信息收集0x02站点信息收集0x03漏洞查找与利用1.发现SQL注入点2.Sqlmap跑数据3.文件包含4.SSH爆破+端口敲门服务5.提权(写入/etc/passwd)0x04总结0x00准备下载链接:https://download.vulnhub.com/dc/DC-9.zip介绍:Theultimategoal......
  • nginx模块ngx_http_geoip2_module
    /home/bby/nginx-1.26.0/modules/ngx_http_geoip2_module-3.4 ./configure--prefix=/usr/local/nginx\--with-compat\--with-debug\--with-pcre-jit\--with-http_ssl_module\--with-http_stub_status_module\--with-http_realip_module\--with-http_auth_req......
  • PgStatement的executeCachedSql(String sql, int flags, String @Nullable [] column
    方法代码如下:privatebooleanexecuteCachedSql(Stringsql,intflags,String@Nullable[]columnNames)throwsSQLException{//第一部分PreferQueryModepreferQueryMode=connection.getPreferQueryMode();booleanshouldUseParameterized=false;......
  • .net 8 应用在docker容器中创建失败 Failed to create CoreCLR, HRESULT: 0x80070008
    在UAT环境中docker容器里部署.net8应用没问题,在dev环境dockerrun启动失败,并报错FailedtocreateCoreCLR,HRESULT:0x80070008以下文章解决了我遇到的问题,感谢https://www.cnblogs.com/cyq1162/p/17981333处理办法增加--security-optseccomp=unconfineddockerrun-......
  • 科大讯飞t30ultra和小度z30区别
    科大讯飞t30ultra科大讯飞AI学习机T30UItra内置星火大模型,主打“AI一对一”,支持AI答疑辅导、AI提优课、幼小初高全科提升等功能;内置类自然光+微纳米类纸护眼屏,具备3K分辨率、120Hz刷新率,PPI为247,支持硬件级低蓝光。科大讯飞AI学习机T30UItra搭载行业首款星......
  • 科大讯飞t30ultra学习机和t20选哪个
    科大讯飞T30UItraAI学习机科大讯飞T30UItraAI学习机内置了星火大模型,主打“AI一对一”,支持AI答疑辅导、AI提优课、幼小初高全科提升等功能。其内置的屏幕尺寸为14.7英寸,分辨率高达3K,刷新率为120Hz,PPI为247。此外,该产品还配备了行业首款星闪AI手写笔,并且支持超万级压感和磁吸......
  • centos7 解决docker 拉取镜像错误 error pulling image configuration: download fai
    为什么会出现i/otimeout错误?i/otimeout错误主要是由于网络连接不稳定或者服务器响应慢导致的。当Docker尝试从镜像仓库拉取镜像时,如果在规定时间内没有得到响应,就会出现i/otimeout错误。“错误的根源在于网络连接和镜像仓库的响应速度” 解决方案:换源为了解决这个......
  • 科大讯飞T30 Ultra和T20 Pro区别对比
    科大讯飞AI学习机T30Ultra与T20Pro均定位于提供全方位、个性化的学习辅助,旨在通过智能化手段优化学习体验。两者主要区别在于硬件配置与部分特色功能的升级。T30Ultra以其更为强大的硬件配置——12GB运行内存加上1TB的超大存储空间,为用户提供了更为流畅的学习体验及海量资源的......
  • 尝试让 BeautifulSoup 打印来自雅虎财经的名字的 URL 列表
    目标是让Python/BeautifulSoup抓取雅虎财经和上市公司所有者的名字/姓氏:frombs4importBeautifulSoupimportrequestsurl='https://finance.yahoo.com/quote/GTVI/profile?p=GTVI'page=requests.get(url,headers={"User-Agent":"Mozil......