跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

ElementUI 表格固定列遮挡滚动条的 CSS 修复方案

ElementUI 表格在启用固定列功能时,常出现固定区域高度覆盖横向滚动条的情况,导致无法拖动。这是因为默认样式中固定容器的高度计算未预留滚动条空间。通过自定义 CSS 样式,将.el-table__fixed 的高度设为 auto 并调整底部间距,即可解决遮挡问题。此方法无需修改组件逻辑,直接作用于样式层,适用于大多数基于 ElementUI 构建的管理后台场景。

baireiraku发布于 2021/5/14更新于 2026/7/2930 浏览
ElementUI 表格固定列遮挡滚动条的 CSS 修复方案

ElementUI 表格固定列遮挡滚动条的 CSS 修复方案

做 ElementUI 开发的时候,有个坑挺容易踩到的:表格启用了固定列功能后,底部的横向滚动条会被固定区域盖住,导致用户点不到也拖不动。

这问题其实很常见,原因很简单。ElementUI 内部对固定列容器的高度计算比较死板,默认样式里 .el-table__fixed 往往直接撑满到底部,把原本留给滚动条的空间给占了。

解决方案

不用改组件源码,也不用引入新库,直接在项目的全局样式文件里加一段 CSS 覆盖规则就能搞定。核心思路是强制调整固定列容器的高度,让它不再完全占据底部空间。

.el-table .el-table__fixed {
  height: auto !important;
  bottom: 16px !important;
}

原理解析

这段代码主要做了两件事:

  1. height: auto !important:解除固定列容器的高度限制,让它根据内容自适应,避免硬性撑开到底部。
  2. bottom: 16px !important:手动给底部留出空间,这个数值通常对应滚动条的高度,确保滚动条能露出来不被遮挡。

加上 !important 是因为 ElementUI 的样式优先级较高,普通 CSS 规则可能被覆盖。如果项目中有多个表格实例,建议确认选择器是否足够精确,必要时可以配合父级 class 进行限定。

这样调整后,表格既能保持固定列的功能,又能正常显示横向滚动条,交互体验就顺畅多了。遇到类似 UI 层级冲突的问题时,这种通过样式微调来解决的方法通常是最轻量且有效的。

目录

  1. ElementUI 表格固定列遮挡滚动条的 CSS 修复方案
  2. 解决方案
  3. 原理解析
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 滑动窗口算法详解与经典例题实战
  • 基于web的社区疫苗接种提醒和监控系统设 开题报告
  • CAN 报文信号矩阵与 DBC 解析异常排查
  • 2026年全球AI大模型深度研究报告
  • C++ explicit 关键字详解:作用、原因与使用
  • OpenClaw 钉钉对接教程:在 Linux 部署本地 AI 智能体
  • OpenClaw Docker 部署教程:集成飞书钉钉 QQ 机器人
  • 渗透测试常见面试题与核心知识点解析
  • 无人机多源融合定位:GPS/北斗标定、抗干扰与精度提升
  • Ubuntu 24.04 在线安装 Redis 8.x 教程
  • Python 数学可视化:显函数、隐函数及复杂曲线交互绘图
  • OpenClaw 安装与飞书机器人全流程配置指南
  • 数据处理:大模型训练的关键环节与实践
  • QClaw 本地化 AI 个人助手平台完全指南
  • Stable Diffusion 3 发布:20 亿参数 Medium 模型与 MMDiT 架构解析
  • Python Playwright 库详解:从入门到实战
  • 2026 年 1 月主流远程桌面工具横向评测与选型建议
  • Neo4j 图数据库使用入门
  • Go2 机器人强化学习(RL)开发实操指南
  • ORB-SLAM3 开源视觉与视觉惯性 SLAM 库详解

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online