el-table纵向和横向都有滚动条的时候，右下角会出现白色小方块

原创 于 2024-08-15 09:11:46 发布 · 676 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

在这里插入图片描述解决方法：添加css样式

::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
  }

效果展示：
在这里插入图片描述

Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
🏆 前端领域优质创作者
02-21 4627
vue3，elementplus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，elementplus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置elementplus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
修改el-table滚动条样式
i_am_a_div的博客
12-14 2492
.el-table { // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10px; // 横向滚动条 height: 10px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #1fff;//颜色 border-r.
html解决滚动条右下角出现的白块
qq_14810897的博客
12-27 1066
css滚动条右下角出现的白块
el-table纵向和横向都有滚动条的时候，右下角会出现白色方块区域
晨曦月的博客
12-08 4083
el-table 是饿了么里面的表格，展示数据很方便，但是有一些不知道的样式覆盖的时候比较麻烦，这里总结一些，希望对大家有一点帮助。 滚动条的选择器： ::-webkit-scrollbar 表格的整个滚动条 ::-webkit-scrollbar-thumb 表格的滚动条 ::-webkit-scrollbar-track 页面的滚动条 ::-webkit-scrollbar-corner 表格...
element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块 解决方案
MISS_CJL的博客
03-23 8078
前言 想要表格的高度自适应屏幕，保证table能一屏内展示完。 elementUI的版本： "element-ui": "^2.14.1", 关键代码： <div style="height: 80vh;"> <el-table style="width: 100%;background: transparent;overflow:auto;" v-loading="table.loadi...
QT treeWidget滚动条右下角白块解决方法
雒珣的博客
07-27 1382
QT treeWidget中的scrollBar样式设置后，横竖两个滚动条都出现时，右下角出现白块
html解决设置滚动条右下角出现的白块
dx_zheng的博客
12-27 4082
// 定义滚动条的样式 ::-webkit-scrollbar { width: 6px; height: 12px; background-color: #161f35; } ::-webkit-scrollbar-thumb { background-color: #252f4a; border-radius: 20px; } /*滚动条里面轨道*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rg.
elementUI的table出现滚动条时会多处一列白色块，如无必要不用自适应宽度
qq_47997447的博客
03-12 1952
elementUI的table出现滚动条时会多处一列白色块
精选资源
el-table-bar-base:element-ui 表格滚动条插件
08-04
修复表格宽度足够的情况下仍然会出现横向滚动条的 bug v2.1.2 提供纵向滚动功能，开启此功能传入height属性即可。具体见 API 列表 v2.1.0 修复 IE11 无法使用的 bug v2.0.9 新增native属性，在设置表格fixed贴合情况...
【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
bbt953的博客
07-24 1374
记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
ElementUI table组件，固定列时，被固定的列下方没有横向滚动条，并且最后一行与其他行错位，并且固定列下方有白色区域
qq_42896240的博客
11-28 2355
ElementUI table组件，固定列时，被固定的列下方没有横向滚动条，并且最后一行与其他行错位，并且固定列下方有白色区域
关于element-ui中el-table滚动最右侧滚动条出现空白列(不出现滚动条)或者最低行被遮盖住的解决
weixin_40994437的博客
04-03 1803
不保证适用于大多数场景，可以作为参考。设置el-table css。
去掉css横向与纵向滚动条交叉的地方白色框
qq_33911541的博客
01-05 1033
去掉css横向与纵向滚动条交叉的地方白色框
如何去掉el-table右边空白条
weixin_44207938的博客
07-17 1932
不知道你们有没有发现el-table当数据量过多的时候就需要我们加滚动条，就要设置height值，但是你会发现当设置了height值滚动条就出来，那么就会看到一个很丑的空白区域，如果说背景色是一个白色还看不太出来，但是如果要改这个表格颜色，那么这一块空白区就会显得很突兀，这个往往是不被客户认可的，像这样。像这样处理就可以了，上代码。
element table组件实现保留横向滚动条，去除纵向滚动条
二三的博客
12-04 5802
实现仅去除纵向滚动条效果 项目开发中，有这样一个需求：实现表格内容自动滚动，去掉纵向滚动条。 代码如下所示： ::v-deep ::-webkit-scrollbar { width: 0; height: 0; } 这种写法确实实现了去掉了纵向滚动条的效果，不过对于我的项目来说，却存在一些问题：因为我的表格的表头是可以动态控制的，所以当默认展示的时候，表格横向宽度足够，不存在滚动条的现象；但当表头全部展示的时候，右侧部分内容展示不出来。因为上面的css代码是将横向以及纵向的滚动条全部给去除了，
el-table右侧有一块空白，为进度条，影响观看
weixin_67849181的博客
03-09 816
给table设置了进度条，只有少量数据的时候很影响观感，感觉table没有盛满。
element表格设置fixed后滚动条滚动时右下角空白块
TianQiWanLaiQiu的博客
07-01 1479
当滚动时显示不全 导致原因：自定义滚动条不全 /* 滚动条整体部分 */ ::-webkit-scrollbar { width: 8px; height: 8px; background-color: #f5f6fa; } /* 滚动条的轨道 */ ::-webkit-scrollbar-track { width: 8px; height: 8px; } /* 滚动条的滑块按钮 */ ::-webkit-scrollbar-thumb { width: 6px; he.
Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题
weixin_45859470的博客
01-09 995
【代码】Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题。
html el-table设置横向纵向滚动条
最新发布
07-17
在使用 `el-table` 组件时，如果需要同时配置横向和纵向滚动条，可以通过设置表格的高度和列的宽度来实现。Element UI 的 `el-table` 会根据内容自动判断是否显示滚动条。 ### 设置纵向滚动条 要启用纵向滚动条，需为 `el-table` 设置一个固定高度（例如通过 `height` 属性）。当表格内容超出这个高度时，纵向滚动条会自动出现。 ```html <el-table :data="tableData" height="400px"> <!-- 表格列定义 --> </el-table> ``` 上述代码中，`height="400px"` 是关键属性，它限制了表格的最大高度，并触发纵向滚动条的显示[^2]。 ### 设置横向滚动条 横向滚动条的出现通常由列的总宽度决定。如果所有列的总宽度超过了 `el-table` 容器的宽度，则会显示横向滚动条。为了确保横向滚动条始终可见，可以手动设置样式以强制其显示： ```css .el-table__body-wrapper { overflow-x: auto; } ``` 此外，还可以进一步自定义滚动条的外观，比如颜色、圆角等，这可以通过添加 WebKit 滚动条伪元素样式实现[^1]。 ### 同时存在横向与纵向滚动条的问题及解决方案 当同时存在横向与纵向滚动条时，可能会遇到一些布局问题，如最后一行数据被横向滚动条遮挡。这是因为 Element UI 在计算纵向滚动条是否应该显示时没有考虑横向滚动条本身的高度，导致计算误差。 解决这个问题的一种方法是调整 `.el-table__body-wrapper` 的高度，减去横向滚动条可能占用的空间，从而保证内容区域不会被遮挡： ```css .el-table__body-wrapper { height: calc(100% - 40px); /* 减去header或其他部分的高度 */ overflow-y: auto; } ``` 这样可以确保即使有横向滚动条，纵向滚动条也能正确地反映内容的实际大小[^4]。 ### 隐藏不必要的空白列 有时，在启用了横向滚动条之后，可能会在表格右侧出现额外的空白区域。这种情况下，可以通过 CSS 来隐藏这些空白区域： ```css .el-table th.gutter, .el-table colgroup col[name='gutter'] { display: none; width: 0; } .el-table__body { width: 100% !important; } ``` 以上样式将移除 gutter 列，避免了由于 gutter 列的存在而产生的多余空白空间[^3]。 ### 总结 - 使用 `height` 属性控制纵向滚动条。 - 通过 CSS 控制 `.el-table__body-wrapper` 的 `overflow-x` 属性来管理横向滚动条。 - 对于更复杂的滚动条行为或视觉效果，利用 CSS 自定义样式进行微调。 - 注意处理好横向滚动条对纵向滚动条计算的影响以及去除多余的空白区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值