el-table因为出现垂直滚动条造成多一个td的空白格

Mr.Meng_95

已于 2022-07-01 16:35:37 修改

阅读量1.9k

点赞数 1

分类专栏：项目文章标签： vue.js javascript css3

于 2022-01-13 17:49:26 首次发布

本文链接：https://blog.csdn.net/qq_30351747/article/details/122479228

版权

项目专栏收录该内容

179 篇文章 11 订阅

订阅专栏

el-table因为出现垂直滚动条造成多一个td的空白格

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

效果图

在这里插入图片描述

解决

思路
给倒数第一个表头的右边框去掉，给空白格加上一样的背景颜色就可以了

/deep/th {
   &:nth-child(3) {
       border-right: 0;
   }
   &:nth-child(4) {
       background: rgb(229, 229, 230);
   }
}

完美解决

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr.Meng_95

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

table内容出现滚动条和表头对齐问题

05-09

为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...

记录el-table出现滚动条，表头会有留白现象

ae_pppppp的博客

08-09

1667

如果有时候设置了不生效，那就是没有设置在全局下面，可能设置进了某个类下面。有时候table加上个别min-width时候，会出现留白现象。直接修改表头th背景色。

参与评论您还未登录，请先登录后发表或查看评论

element-ui table 表格头多出一列

baihua__shu的博客

04-14

7722

问题：el-table 组件表头右侧多出一列空白原因：所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位解决：将 th.gutter 隐藏 th.gutter { display: initial; } /* vue 使用 scoped 需要 /deep/ 深度作用 */ div /deep/ th.gutter { display: initial; } 或将 th.gutter ...

饿了么 ui表单有滚动条的时候右上角多一节

热门推荐

天天向上

08-15

1万+

原因： el-table的宽度是100%,给每一个el-table-column设置宽度之后就会有这个问题解决方法：删除其中一个el-table-column的宽度

关于elementui的table固定高度出现的表格高度有空缺

qq_35000425的博客

04-23

2576

在使用elementui的table组件的时候，设置一个固定高度使表头固定，有时候表格下方会多出一小段空白，度娘搜索半天没找到解决方案，找到几个都是固定表头和表格高度，或者用js获取dom高度动态绑定，然后自己想了一个方案这是el-table的结构，我这边场景能用到的只有el-table__header-wrapper表头和el-table__body-wrapper表格两个，::before是定位的不用管，话不多说，上代码 #app /deep/ .el-table{ display: f

Element中table组件(el-table)右侧滚动条空白占位处理

欢迎留言~

02-15

6355

Element中table组件(el-table)右侧滚动条空白占位处理

Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题

我是一个酒鬼的博客

05-12

7478

Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题

一个属性border-collapse解决Table的边框问题

09-25

原因在于，如果要创建一个看起来整洁美观的表格，需要花费大量的时间和精力去调整边框，以避免边框之间的间隙和重叠，造成视觉上的不协调。在早期的网页设计中，表格的边框通常需要通过设置单元格（Cell）的边框...

vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

10-16

这将返回不包括滚动条的可视区域宽度。 ```javascript adjustTable(event) { this.clientWidth = event.target.clientWidth; } ``` 3. **CSS样式调整**： - **表格样式**：为了让表格具有滚动功能，需要对`...

table无限循环无缝滚动.zip

09-01

此外，CSS还可以用来调整表格的滚动行为，比如使用`overflow: auto`属性来创建滚动条，并通过`position`和`z-index`控制元素的层叠顺序，确保隐藏副本在合适的时候显示。关键在于JavaScript，它是实现无限循环的...

element表格多出一列空白

weixin_38999134的博客

01-26

2295

原因： el-table给每一个el-table-column设置宽度之后就会有这个问题解决方法：删除其中一个el-table-column的宽度就好了

el-table修改滚动条样式导致留白问题

weixin_41359197的博客

02-06

1435

从源码中可以看出，right的计算是通过在body创建一个el-scrollbar__wrap类的div，在el-scrollbar__wrap通过设置样式scroll，再里面引入子级div，通过父子级的offsetWidth计算出scroll的宽度是多少，而scroll的宽度实际上是全局的scroll宽度，所以导致我们在组件局部定义scroll宽度会出现留白。看元素发现el-table__fixed-right样式是滚动设置的，决定从源码入手，看看el-table是怎么计算的。

vue|Element的el-table条件遍历问题：只过滤了数据，没有过滤相应数据所在行，导致空行现象

killbibi的博客

09-13

1727

1. 产生原因由于el-table中是el-table-column=>template=>span这个逐级模式，优先遍历完所有column行，然后再在span的中进行条件过滤，这就导致了“空行”现象的产生。 2. 解决方案第一次尝试的方式把template放column行外，控制遍历次数，但报错了，因为template需要依赖行获取是数据，把template放在外面直接导致了scope.row访问不到数据,从而读取parentId值报错。最终解决方案是基于css的display:non

el-table合并单元格-会超出表格内容问题

半朵梨花压海棠

09-25

691

el-table合并单元格-会超出表格内容问题

el-table底部空白出现滚动条，el-table__body-wrapper高度小于el-table的高度

wusq的博客

12-30

3002

今天在研究keep-alive页面缓存的时候发现，切换到其他页面再切换回已打开的页面时，el-table表格出现底部还有空白，但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图：解决：在网上找了一些方法，发现doLayout()方法可以完美解决！ element2.0.5发布的该方法，可以用于重新计算表格布局使用方法：如果不是缓存页面，在mounted调用，如果是缓存页面，则在activated调用。 mo

elementUI中table组件会出现空白部分

weixin_52309490的博客

06-24

2034

先上图: 造成原因:width全部都写死了，(注释:不要全部都写死width，没写width的会自动分配宽度) 那时候我只有一台录音机也没有电脑也不敢奢求说唱会让自己的生活变好

element-ui el-table 表格头多出一列

qq_45067263的博客

04-21

2737

项目场景：解决方案： .el-table 里默认的auto换成overlay .el-table { overflow: overlay; }

vue el-table隐藏纵向滚动条出现空白格

weixin_43340706的博客

07-19

632

* 保留垂直滚动且隐藏滚动条start *//* 保留垂直滚动且隐藏滚动条end */

vue3的el-table添加滚动条

03-21

可以使用 CSS 样式来为 el-table 添加滚动条，具体的实现方式如下： 1. 在 el-table 的外层包裹一个 div 容器，并设置该容器的高度和 overflow 属性为 auto。 2. 在 el-table 的样式中，设置表格的宽度为 100%。 3. 在 el-table 的样式中，设置表格的 tbody 的 display 属性为 block，并设置其高度为 100%。 4. 在 el-table 的样式中，设置表格的 tbody 的 overflow 属性为 auto。 5. 在 el-table 的样式中，设置表格的 tbody 的 white-space 属性为 nowrap，这样可以让表格的内容不换行。 6. 在 el-table 的样式中，设置表格的 tbody 的 table-layout 属性为 fixed，这样可以让表格的列宽度固定。 7. 最后，在 el-table 的样式中，设置表格的 th 和 td 的 padding 属性为 0，这样可以让表格的内容与边框之间没有间隔。下面是一个示例代码： ``` <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <style> .table-container { height: 300px; overflow: auto; } .el-table__body-wrapper { display: block; height: 100%; overflow: auto; white-space: nowrap; table-layout: fixed; } .el-table__header-wrapper th, .el-table__body-wrapper td { padding: 0; } </style> ``` 希望这个回答能够帮助到你！