笔记：Element table表格固定列横向滚动条无法拖动的问题解决

原创已于 2022-12-01 10:38:54 修改 · 759 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-12-01 10:38:50 首次发布

本文介绍了一种通过调整CSS样式来解决滚动条被遮挡的问题。具体地,通过设置.el-table.el-table__fixed的高度为auto及底部位置为16px,并将其前背景颜色设为透明,成功解决了这一问题。

一段样式解决战斗👇👇👇

.el-table .el-table__fixed {
height:auto !important;
bottom: 16px !important;
   &::before {
       background-color: transparent;
   }
}

ps：当你细心打开f12查看样式结构你就会发现有一段高度把滚动条挡住了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

skyseey

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript学习笔记--进阶之路

JackieDYH的博客

03-16

2092

了解js特性&事件使用 20200316 1、JavaScript简介历史：第一个浏览器就是文本和图片网景公司增强用户的使用体验急需一门语言实现用户和网页之间的交互诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------）这个时候使用的是java ---...

html+css知识点复习回顾，复习参考

weixin_55935744的博客

11-28

1414

这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性一、HTML部分 1、两个盒子 <div>、<span&g

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

Table固定指定列进行横向滚动(可拓展)

05-29

根据不同需求固定指定列进行横向滚动操作提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)

antd 表格固定列设置横向滚动条，常用于列比较多的情况

业余前端的职业经历

05-17

1万+

table表格展示，在后台中用的特别多，当一些列特别多的情况下，就需要我们用固定列的方式进行展示，然后横向滚动条 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用注意要配合 scroll.x 进行使用哈，否则就算是你固定了也不会出现滚动条 const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fi

利用纯css实现table固定列与表头中间横向滚动的思路和实例

09-24

主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

Element 表格固定列横向滚动条无法拖动的问题解决

张兴华的博客

11-20

4873

在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。如下图所示为对固定列区域调整后的效果图：下面是解决问题所需的代码： .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~

ElementUI＜el-table＞＜/el-table＞表格中固定列横向滚动条无法拖动解决

最新发布

qq_53911056的博客

10-31

3161

当表格有固定列会出现横向滚动条无法拖动问题，尤其是固定列固定在左边且表格没数据的时候。这可能是因为固定区域盖住了横向滚动条，不是视觉上的覆盖，是去拖动时没有触发效果。

css笔记

PrimaryColor

07-30

673

css(层叠样式表) CSS的发展历程从HTML被发明开始，样式就以各种形式存在不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制最初的HTML只包含很少的显示属性随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿于是CSS便诞生了. CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets

vue笔记总结

qq_44417271的博客

02-01

1717

VUE vue框架的两大核心：数据驱动和组件化。第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM）第二周：大家需要转变编程思维的习惯：组件化一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签，实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM

Java核心技术· 卷二（11版）笔记（第 9-12章）

weixin_43647460的博客

11-16

792

Java平台模块系统是Java 9中引入的一个新特性，它可以更好地管理Java应用程序的依赖关系，提高应用程序的可扩展性和安全性。模块系统可以将Java应用程序的代码组织为独立的模块，每个模块都有自己的接口和实现。模块可以声明自己的依赖关系，并且只会导出需要公开的API，从而减少了依赖项的耦合性和可能出现的命名冲突。同时，模块系统还提供了更好的可见性和访问控制，允许开发人员更好地控制代码的复杂性和安全性。在Java 9的模块系统中，一个模块是一个可以进行依赖管理和版本控制的独立单元。每个模块都有自己的名称、

纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

ma524654165的博客

09-08

6302

最近做的后台管理系统要处理大量的表格原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 div{ white-space: nowrap

Vue进阶（幺幺玖）：element-ui table组件适应性问题（横向滚动条）

IT全栈华强工作室

05-29

7319

在开发前端项目过程中，解决适配性、兼容性问题是经常遇到且费事费力的苦差事，尤其是在开发Vue项目，应用部署在IE（尤其是IE9）上的时候。在进行动态展示（根据后台返回的表头、表数据展示）搜索结果时，会遇到搜索结果适配屏幕宽度或高度，但是却会出现纵向或横向滚动条的现象，通过F12调试页面元素，会发现动态的增删overflow:auto元素属性，会解决以上问题。由此可知，动态渲染页面元素时，页面加载之前，由于页面元素尚未完全加载计算元素属性值结束，会造成屏幕出现不适配，即会出现横向纵向滚动条的问题，现在的解决

Element UI中的table组件添加横向滚动条

热门推荐

Web_chicken的博客

08-27

1万+

如何给Element UI中的table组件添加横向滚动条 并非是浏览器自带滚动条样式，而是类似于Element滚动条样式话不多说直接上代码 .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /*

ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题

m0_60913515的博客

01-03

1575

【代码】ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题。

日常开发记录-el-table 固定列下横向滚动条无法拖动的问题解决方案

machine_vision123的博客

08-25

1656

原因：层级问题，左侧固定列层级高，滚动条层级低，提升一下滚动条层级即可注意要在全局样式中定义类 fixed-scrool-error样式 .fixed-scroll-error { .el-table--scrollable-x .el-table__body-wrapper { z-index: 2; } } 运用：直接在有问题的表格最外层标签中使用 fixed-s...

element table组件列表固定列后横向滚动条的问题

FY18381366936的博客

10-19

881

el-table 横向滚动条

table固定列横向滚动_Fusion 组件设计 - VirtualList 无限滚动

weixin_39620151的博客

12-07

438

Fusion Design体系在经历阿里巴巴集团内部三年多的锤炼后终于在上个月对外开放了，作为设计系统的基础骨架——Next组件库也在正式开源啦 Fusion Next（包名@alifd/next）是一个基于 React 实现，面向 PC 端的可配置组件库。为阿里集团2000+个项目服务的同时，沉淀出了不少基础组件，现在已经达到50+。这个系列将通过实际需求场景，来介绍Fusion组件库的各种有...

ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题

LeeBingNing的博客

04-14

6804

ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题

el-table固定列之后滚动条无法拖动

qq_34263566的博客

04-07

1563

使用el-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动

org-table-sticky-header：Emacs中表格固定表头的解决方案

粘性标头（Sticky Header）功能是指表头固定在屏幕顶部，即使用户滚动表格，表头也会保持可见。这样，用户在查看或编辑表格底部的信息时，仍然能够看到每个列的名称，从而不会混淆每列数据对应的含义。 ### 知识点...