el-table右边和底部滚动条太粗了，如何调整滚动条宽度？

最新推荐文章于 2025-05-28 10:05:37 发布
最新推荐文章于 2025-05-28 10:05:37 发布
阅读量1.5k 收藏 2
点赞数 5
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47415511/article/details/136362725
本文介绍了如何使用CSS针对`.el-table`中的`.el-table__body-wrapper`元素的滚动条宽度和高度进行单独定制，以提升Web设计的灵活性和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

width和height可单独调整

.el-table .el-table__body-wrapper::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: transparent;
}
Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
王二红
02-21 4217
vue3，elementplus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，elementplus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置elementplus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
bbt953的博客
07-24 1152
记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
el-table 横向滚动条加粗被遮挡 样式修改
embraceblankandfull的博客
03-19 597
el-table__fixed .el-table__fixed-body-wrapper { // 重点。.el-table--scrollable-x .el-table__fixed { // 重点。
elementUI Table修改滚动条宽度后冻结列遮挡滚动条，并且最后一行错位
最新发布
weixin_44205089的博客
05-28 117
【代码】elementUI Table修改滚动条宽度后冻结列遮挡滚动条，并且最后一行错位。
[element-ui] el-table组件滚动条的宽度设置
qq_14993591的博客
03-12 1809
【代码】[element-ui] el-table组件滚动条的宽度设置。
修改el-table滚动条&设置el-table行高&表格样式
m0_69502730的博客
11-28 7004
【代码】修改el-table滚动条&设置el-table行高&表格样式。
elementUI——el-table组件滚动条的宽度设置——css基础
热门推荐
yehaocheng520的博客
11-10 1万+
今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调： 如下： 根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致： 修改页面滚动条的宽高可以通过如下的css样式来处理： ::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent; } 只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的
修改table/el-table滚动条
m0_62782752的博客
05-22 1015
修改el-table 默认滚动条。修改table 默认滚动条。
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
【记录52】el-table-column 添加fixed属性 滚动条无法滑动
~牧马~
01-15 807
使用element UI组件，用到el-table的el-table-column的fixed属性时，当滚动条长度小于固定列时，滚动条无法通过鼠标去点击滑动操作。
el-table-bar-base:element-ui 表格滚动条插件
08-04
修复表格宽度足够的情况下仍然会出现横向滚动条的 bug v2.1.2 提供纵向滚动功能，开启此功能传入height属性即可。具体见 API 列表 v2.1.0 修复 IE11 无法使用的 bug v2.0.9 新增native属性，在设置表格fixed贴合情况...
滚动条设置
anchaqian9321的博客
12-20 320
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置...
VUE3:element ui中修改滚动条的宽度
weixin_47194802的博客
01-26 973
【代码】VUE3:element ui中修改滚动条的宽度。
修改el-table默认滚动条样式
wch19960518的博客
10-22 1134
el-table原有滚动条样式对有些用户来说太窄，拖动起来不方便，因此做出如下修改。
el-table 有x轴滚动条，如何默认固定滚动在右侧
qq_40603125的博客
06-12 587
滚动方法最好设置一个定时器。
Vue3-elementplus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色（详细示例代码，解决样式覆盖失败问题）
Lynn
03-27 4498
Vue3 Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）)
el-table 右侧滚动栏设置
lfl18326162160的博客
07-26 418
* 设置table的body和header宽度一致 *//* 设置是否隐藏右侧滚动框 *//* table右侧横线设置 *//* table底部横线设置 */
修改el-table滚动条样式
weixin_30768175的博客
07-16 1890
<include file="Trade:header" /> <style type="text/css" media="screen"> #tradeLeft{ width: 23%; padding: 20px; } /*chrome滚动条颜色设置*/ *::-webkit-scrollbar...
el-table根据容器大小自适应滚动条-修改滚动条样式
请叫我欧皇！的博客
08-18 1517
需求：父容器里有多个容器为上下级，之后浏览器在缩放的时候，上面容器高度改变了，所以el-table被挤压，如果el-table设置的是固定的高度，那么挤压后内容超出父容器，本文章就是解决这个问题不自适应错误用法：浏览器伸缩挤压后元素超出了。
el-table 宽度过宽 横向滚动条控制不了el-table
05-17
### 解决方案 当 `el-table` 的宽度超出容器范围时，可能会遇到横向滚动条无法正常工作的问题。以下是几种可能的解决方案： #### 方法一：修复固定列的高度和底部偏移 可以通过覆盖默认样式来解决固定列位置失效的问题。具体方法如下： ```css :deep(.el-table) { .el-table__fixed { height: auto !important; bottom: 5px !important; /* 调整为滚动条的实际高度 */ } } ``` 此方法适用于因固定列设置而导致的滚动条显示异常问题[^1]。 --- #### 方法二：强制显示横向滚动条 如果发现滚动后横向滚动条消失，则可以修改其 CSS 属性以确保始终可见： ```css .is-scrolling-left::-webkit-scrollbar { display: block; width: 5px !important; /* 设置滚动条宽度 */ } ::-webkit-scrollbar-thumb { background: #bee5ff !important; /* 滚动条颜色 */ border-radius: 6px !important; /* 圆角处理 */ } ``` 该方式能够有效防止滚动条在某些情况下被隐藏[^2]。 --- #### 方法三：通过鼠标滚轮实现横向滚动 为了增强用户体验，可以在表格组件上绑定鼠标的滚轮事件，从而支持用户通过滚轮控制横向滚动。HTML 和 JavaScript 实现代码如下所示： ##### HTML 部分 ```html <el-table :data="fileList" style="width: 100%" ref="tableRef" @wheel.native.prevent="handleMouseWheel"> ... </el-table> ``` ##### Vue.js 方法部分 ```javascript methods: { handleMouseWheel(event) { const tableBody = this.$refs.tableRef.bodyWrapper; if (event.shiftKey || event.ctrlKey) { // 判断是否按住 Shift 或 Ctrl 键 event.preventDefault(); // 防止页面整体滚动 tableBody.scrollLeft += event.deltaY; // 控制水平方向上的滚动距离 } } } ``` 这种方法允许用户按下键盘中的 **Shift** 或 **Ctrl** 同时使用鼠标滚轮完成横向移动操作[^3]。 --- ### 总结 以上三种方法分别针对不同场景下的需求提供了对应的优化策略。可以根据实际项目情况选择合适的手段解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值