elementUI的table出现滚动条时会多处一列白色块，如无必要不用自适应宽度

已于 2024-12-20 15:30:22 修改
阅读量1.8k 收藏 1
点赞数 1
文章标签： html5
于 2023-03-12 19:32:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_47997447/article/details/129479684
版权
文章介绍了如何使用CSS修改Webkit浏览器中的表格滚动条样式，包括设置滚动条的宽度和滑块的背景色。同时，也提供了隐藏表格列的CSS代码，通过`.el-tableth.gutter`和`.el-tablecolgroupcol[name=gutter]`选择器来调整列宽为0，实现隐藏效果。最后，确保表格宽度适应变化。

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

修改滚动条样式方法， 整个滚动条 .el-table::-webkit-scrollbar{

width: 5px;

background: rgb(51, 47, 104);

}

滚动条滑块 .el-table::-webkit-scrollbar-thumb{

width: 5px;

background: rgb(179, 156, 156);

}

问题：出现一列白色块，怎么消除

隐藏这一列的方法

.el-table th.gutter {

display: none;

width: 0;

}

.el-table colgroup col[name='gutter']{

display: none;

width: 0;

}

.el-table__body{

width: 100% !important;

}

codekjy
关注
elementui跨行合并以及自适应表格高度（滚动条）
slom_fxt的博客
01-29 267
这里解决三个问题：1.跨行合并 2.表体的高度自适应 3.列的宽度自适应。
ElementUI 实现el-table 列宽自适应
澎湖Java架构师的博客
03-03 2341
一、概述 Element UI 是 PC 端比较流行的 Vue.js UI 框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格里的内容就会换行。强制不换行，内容要么在单元格内滚动，要么就会溢出或被截断。 产品想要的效果是：内容保持单行显示，
element-ui table 表格头多出一列
baihua__shu的博客
04-14 8690
问题：el-table 组件 表头右侧多出一列空白 原因： 所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位 解决： 将 th.gutter 隐藏 th.gutter { display: initial; } /* vue 使用 scoped 需要 /deep/ 深度作用 */ div /deep/ th.gutter { display: initial; } 或将 th.gutter ...
el-table纵向和横向都有滚动条的时候，右下角会出现白色方块区域
晨曦月的博客
12-08 4033
el-table 是饿了么里面的表格，展示数据很方便，但是有一些不知道的样式覆盖的时候比较麻烦，这里总结一些，希望对大家有一点帮助。 滚动条的选择器： ::-webkit-scrollbar 表格的整个滚动条 ::-webkit-scrollbar-thumb 表格的滚动条 ::-webkit-scrollbar-track 页面的滚动条 ::-webkit-scrollbar-corner 表格...
element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块 解决方案
MISS_CJL的博客
03-23 7371
前言 想要表格的高度自适应屏幕，保证table能一屏内展示完。 elementUI的版本： "element-ui": "^2.14.1", 关键代码： <div style="height: 80vh;"> <el-table style="width: 100%;background: transparent;overflow:auto;" v-loading="table.loadi...
el-table因为出现垂直滚动条造成多一个td的空白格
yangpengze的博客
05-18 1019
el-table因为出现垂直滚动条造成多一个td的空白格 效果图 解决 思路 利用deep穿透给倒数第一个表头的右边框去掉，给空白格加上一样的背景颜色就可以了 /deep/th { &:nth-child(3) { border-right: 0; } &:nth-child(4) { background: rgb(229, 229, 230); } } 解决完后的效果图 ...
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
07-21 783
解决方案就是在 grid 布局层加上下面一行代码，定义每一列的列宽（真的笑死），这里由于只有一列，直接可以写成下面的样子。今天在项目里面遇到了这个问题，相当炸裂，看了半天都没有看出什么问题，很是逆天，记录一下。然后切换按钮，数据就会变化，产生滚动条，table的宽度就会不断增加。"上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄"
el-table纵向和横向都有滚动条的时候，右下角会出现白色小方块
Roy__Jason的博客
08-15 567
el-table纵向和横向都有滚动条的时候，右下角会出现白色小方块
elementui table 默认带滚动条 导致 表头不对齐问题
lllsj的博客
11-05 6067
当页面加载数据,数据条数太多,导致table出现滚动条,应该是 dom渲染问题,table默认加载没有滚动条.数据多 异步加载导致如下问题,解决方案: src->styles->index.scss 或者 APP.vue下 添加 如下 样式,缺一不可! 之前网上搜 直说 写上面的就行,但是 根本不好使!这么写,强行覆盖滚动条样式,width=滚动条宽度 就ok了! // 全局设置 b...
QT treeWidget滚动条右下角白块解决方法
雒珣的博客
07-27 1288
QT treeWidget中的scrollBar样式设置后，横竖两个滚动条都出现时，右下角出现白块
vue中x,y同时出现滚动条后，右下角会出现白色小方块得解决方法
qq_38076145的博客
10-25 429
::-webkit-scrollbar-corner{ background: transparent; }
Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题
我是一个酒鬼的博客
05-12 7663
Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题
el-table隐藏右边滚动条
yujiabao702的博客
04-04 1506
类型二：不给 height 属性,不会固定表头。类型一：有 height 属性,会固定表头。需求：隐藏表格右边的滚动条。
element-ui 表格底部留白/el-table__body-wrapper is-scrolling-none 高度错误
qq_44644561的博客
04-06 3425
的高度在没有完全展开的时候会造成表格体溢出，表格显示不完全，底部留白。这是网上搜罗到的方法，但对我没用，还是放出来给大家做个参考。assets-table 就是el-table 上面的。tableFormR 就是el-table 上面的。的高度即可 这个就比较白痴 但有效。动态计算table的高度。比上一种方法多了一个。
关于element-ui中el-table组件纵向滚动条上面出现空白，无法遮盖下方内容问题详解
qq_38409994的博客
02-16 2881
1.问题上图 如图所示，纵向滚动条上面有部分空白 2.解决方案： .el-table th.gutter { display: table-cell !important; height: 32px; background: rgba(240, 240, 240, 1); border-bottom: 1px solid #bbb !important; position: absolute; right: 0; top: 0; } 1.gutter就是那个块元素的class名
Element el-table 固定高度后当数据条数过多产生滚动条的问题
m0_71959549的博客
01-05 1892
可以发现出现了新的问题，表头列与内容列发生了错位。解决方法：给内容宽度加上滚动条的宽度。
第四十八篇：element UI 表格套表格或者单表格右侧多出来一块怎么解决
maliyao4233的博客
01-18 923
解决办法：不要每项都设置宽度，有一项或者多余一项不设置宽度就能解决，或者 widht 改成 min-width。问题如下：用element el-table最右侧多出来一块。
element el-table修改滚动条样式后出现露出的问题
qq_34811855的博客
07-20 329
element el-table修改滚动条样式后出现露出的问题
记录el-table出现滚动条，表头会有留白现象
ae_pppppp的博客
08-09 1780
如果有时候设置了不生效，那就是没有设置在全局下面，可能设置进了某个类下面。有时候table加上个别min-width时候，会出现留白现象。直接修改表头th背景色。
jeecgBoot中<a-table>如何实现列宽度自适应，超出界面的部分滚动条拖动
最新发布
04-03
列宽自适应方面，用户提到如果不指定宽度，可能会平均分配，但内容多的时候会出现换行或溢出。根据引用[1]，ElementUI的el-table默认平均分配剩余列宽，但Ant Design的a-table可能类似。用户需要列宽根据内容自适应...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值