改变表格自带的 滚动条 的宽度

最新推荐文章于 2024-09-24 16:41:00 发布
最新推荐文章于 2024-09-24 16:41:00 发布
阅读量507 收藏
点赞数
分类专栏： css样式问题 element-ui 表格 文章标签： Element-UI 表格组件 滚动条样式 CSS 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45646663/article/details/125161218
版权

这里我用的是element-ui的表格
在style里写
.el-table–scrollable-y .el-table__body-wrapper看你的class是什么为决定

.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
  width:10px;
  height: 10px;
}

在这里插入图片描述

靓靓的圆子
关注
专栏目录
Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
王佳斌
02-21 3472
vue3，element plus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，element plus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置element plus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
element table滚动条占宽度_2018-05-18 记一次element-ui配置化table组件的适应性问题（横向滚动条）...
weixin_39548968的博客
12-19 871
本来想在 jsfiddle 重现下的，结果没有成功，就给大家看截图吧截图vue版本：2.5.3element-ui版本：1.4.13浏览器：chrome 66.0.3359.170大家可以发现，固定了高度的 table 不仅出现了纵向滚动条，横向滚动条也出现了(只能滚动一点点)，其实宽度是足够显示的。有一点和#78相似，我的 table 也是配置化的，表头和内容都是作为属性传过去，可能导致表格在初...
[element-ui] el-table组件滚动条的宽度设置
qq_14993591的博客
03-12 1499
【代码】[element-ui] el-table组件滚动条的宽度设置。
若依前后端分离版修改el-table的全局滚动条大小
最新发布
Hrcrim的博客
09-24 313
想要修改el-table的滚动条大小，搜了许多教程，像修改全局index.scss、ruoyi.scss等都没有成功，也许是我的搜索词不对吧，反正就是没成，然后就试着在项目里全局搜索【-webkit-scrollbar】，对比日志就定位到了AppMain.vue页面，改完宽高运行一下结果真成了。1. 打开 【layout —> AppMain.vue】页面，或者全局搜索【-webkit-scrollbar】。2. 直接修改成想要的大小，我是改成了10px（附上改完效果）
elementUI——el-table组件滚动条的宽度设置——css基础
热门推荐
yehaocheng520的博客
11-10 1万+
今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调： 如下： 根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致： 修改页面滚动条的宽高可以通过如下的css样式来处理： ::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent; } 只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的
elementUI表格组件，当表格横向滚动时，每列宽度自适应
Min_Fox的博客
07-19 1524
elementUI表格组件，当表格横向滚动时，每列宽度自适应
VUE3:element ui中修改滚动条的宽度
weixin_47194802的博客
01-26 831
【代码】VUE3:element ui中修改滚动条的宽度。
修改tablewidget的scroll宽度
08-03
成功解决ARM下qt4.7，tablewidget的scroll的宽度设置问题
小程序自制自带滑动条的表格组件
MrJovia的博客
10-22 1741
小程序自制自带滑动条的表格组件在编写过程中遇到的难点1. 表格的编写2. 表格内容宽度固定 长度自适应3. 滚动条逻辑及代码编写4. 滚动条的卡段优化5. 小程序组件的编写及应用 先上最终效果图，表格可以上下、左右滑动，表格内容宽度固定，高度自适应内容大小，附上滑动条，滑动条长度宽度也是自适应表格的。 在编写过程中遇到的难点 表格的编写，小程序无table标签，需要自己用view+flex布局编写。 表格内容宽度固定，长度自适应。 滚动条逻辑及代码编写。 滚动条的卡段优化。 小程序组件的编写及应用。
qml tableview 滚动条加宽_制作QML TreeView可调整大小
weixin_39759441的博客
12-20 673
我已经使用QML TreeView和TableView制作了一个工作应用程序。 Treeview是双窗格视图的左侧，TableView是双窗格视图的右侧(就像Windows资源管理器一样)。制作QML TreeView可调整大小如何指定用户可以通过抓取视图和拖动的中心最边缘来调整两个视图的宽度？ApplicationWindow {visible: truewidth: 640height: 48...
elementui中不用el-table框自带的滚动条用浏览器自己的滚动条
06-01
如果你想要使用浏览器自带的滚动条，可以将 table 的 height 设置为 auto，然后将 el-table-column 的 width 属性设置为一个固定的值，这样表格就会根据列宽度自适应高度，从而使用浏览器自带的滚动条。 示例代码...
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
07-21 697
解决方案就是在 grid 布局层加上下面一行代码，定义每一列的列宽（真的笑死），这里由于只有一列，直接可以写成下面的样子。今天在项目里面遇到了这个问题，相当炸裂，看了半天都没有看出什么问题，很是逆天，记录一下。然后切换按钮，数据就会变化，产生滚动条，table的宽度就会不断增加。"上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄"
elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题解决方案(100%解决！！！)
DLGDark的博客
08-04 9113
解决方案： 在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图：
vue element的form组件滚动条修改宽度
睡大觉的博客
02-19 1588
css //修改滚动条宽度 ::-webkit-scrollbar { width: 10px; background-color: #f1f1f1; } 修改滚动条滑块高度及样式 ::-webkit-scrollbar-thumb { background-color: #c1c1c1; height: 20px; border-radius: 3px; } 效果图
vue拖拽调整宽度指令
JOKERJZJ的博客
04-06 725
【代码】vue拖拽调整宽度指令。
element-ui 表格组件设置最大高度后 宽度无限拉长问题
xiexie16888的博客
05-14 9665
table表格中的属性是可添加的所以需要给table添加一个滚动条 所以就做了如下操作： .el-table { width: 100%; >>> .el-table__body-wrapper { max-height: 300px; } } 更改过后就出现了表格宽度无限拉长的情况； 检查后发现造成这样的原因有两个： 一个是由于父级元素为flex布局， 另一个问题是没有给table表格添加一个高度 只是给他的子级组件.el-table__body-wrapper添
修改el-table滚动条&设置el-table行高&表格样式
m0_69502730的博客
11-28 6399
【代码】修改el-table滚动条&设置el-table行高&表格样式。
ElementUI解决表格fixed样式问题，正确计算滚动条宽度
idanzk的博客
11-24 624
为el-table 添加ref属性 ref="myTable"在使用ElementUI时， 对表单数据进行条件搜索，出现纵向滚动条时。出现下面的问题，表头占据了进度条上方的宽度。在每次调用搜索方法时，手动触发表格重新布局。table赋值完成后，添加下面的代码，我的使用场景 vue2后台管理系统。手动触发表格重新布局。
element-ui table 滚动条变细
Wcharles666的博客
12-29 4358
在全局样式中加入以下css,只对Google浏览器生效 // 滚动条的宽度 ::-webkit-scrollbar { width: 8px; height: 8px; } // 滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 4px; } ...
手动添加宽度不固定的表格横向滚动条
06-01
如果表格的宽度是不固定的，你可以在 CSS 样式中使用 `table-layout: fixed` 来实现固定表格宽度，并且在 HTML 标记中为表格的每一列设置一个百分比宽度，这样每一列的宽度就会自动根据表格宽度进行调整。 以下是一个示例代码： HTML: ```html <div class="table-container"> <table> <thead> <tr> <th style="width: 20%;">Header 1</th> <th style="width: 20%;">Header 2</th> <th style="width: 20%;">Header 3</th> <th style="width: 20%;">Header 4</th> <th style="width: 20%;">Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> <td>Row 1, Column 5</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> <td>Row 2, Column 5</td> </tr> <!-- more rows --> </tbody> </table> </div> ``` CSS: ```css .table-container { width: 100%; overflow-x: auto; } table { width: 100%; table-layout: fixed; /* 固定表格宽度 */ } ``` 在上面的示例中，我们将表格放在一个名为 .table-container 的 div 元素内，并为该元素设置了宽度和 overflow-x: auto; 属性。表格的宽度被设置为 100%，这样表格的宽度就会自动根据容器宽度进行调整。我们还为表格设置了 `table-layout: fixed` 属性，这样所有列的宽度就会根据表格的第一行来自动调整。 每一列的宽度被设置为 20%，这样每一列就会占据表格的总宽度的 20%。当表格的宽度超过容器宽度时，容器元素会出现横向滚动条，用户就可以通过滚动条来滚动表格了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值