antd table横向滚动条样式自定义

总结了一份在工作中常用的antd table 滚动条样式优化的代码

原样式：

优化后样式：

:global { //修改框架样式关键字//表格头标题的滚动条设置// 为什么设置标题头滚动条呢，因为ant中表格直接引入在umi中，显示滚动条，表头也会显示// 我看了生成后的表格元素，发现它是表头其实也是个表格，然后取表格的thead部分设置，// 表体又是一个表格，然后取tbody设置.ant-table-header{border-right: #2F2F2F;//滚动条整体部分&::-webkit-scrollbar {width: 6px;//y轴滚动条粗细height: 6px;//x轴滚动条粗细border-bottom: 1px solid #7B7B7B;}//滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {border-radius: 8px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);      background: #949494;margin-bottom: 10px;}//滚动条的轨道（里面装有thumb）滚动槽&::-webkit-scrollbar-track {-webkit-box-shadow: 0;border-radius: 0;background: #4D4D4B;//滚动槽背景色border-radius: 10px;//滚动条边框半径设置}}//表格体的滚动条设置.ant-table-body{border-right: #2F2F2F;//滚动条整体部分&::-webkit-scrollbar {cursor: pointer;width: 6px;//y轴滚动条粗细height: 10px;//x轴滚动条粗细// border-bottom: 1px solid #7B7B7B;}//滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {border-radius: 8px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);      background: #f3f3f3;margin-bottom: 10px;}//滚动条的轨道（里面装有thumb）滚动槽&::-webkit-scrollbar-track {-webkit-box-shadow: 0;border-radius: 0;background: #e2e2e2;//滚动槽背景色border-radius: 10px;//滚动条边框半径设置}}}

antd table横向滚动条样式自定义相关推荐

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
html滚动条样式自定义,如何自定义CSS滚动条的样式？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
修改 echarts 默认样式记录，包含设置横向滚动条样式、坐标轴标签溢出 hover 显示全部
1.修改折线图上的数据标记点 showSymbol:false , 表示不展示数据点,只有鼠标 hover 时, tooltip 展示. series: [{name: '进场', // 名称,图例和 ...
html滚动条样式自定义,CSS自定义滚动条样式
今天心情很是不好呐,上午没来上班,钉钉申请通过,人事居然扣除我双倍工资,记过一次.次奥!***屌毛,长话短说,很是郁闷. -webkit-scrollbar 众所周知,浏览器默认的滚动条样式实在是.. ...
QML QtQuick.Controls 2 ScrollBar滚动条样式自定义
测试版本:Qt5.12及Qt5.15 ,参考Qt源码及文档示例代码链接:https://github.com/gongjianbo/QmlComponentStyle.git 自定义样式与默认样式的 ...

antd table横向滚动条样式自定义

antd table横向滚动条样式自定义相关推荐

最新文章

热门文章