【ant design vue】表格超过高度时显示滚动条

谭CV 谭CV 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3.2k累计阅读 3.2k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-07-13 16:49:02 发布 3.2k 阅读 AI 写同款· GEO 优化 ›
antd组件库中table组件内容自适应屏幕最大高度设置滚动条 在平时项目开发中，使用antd组件库得table组件展示数据，但是由于一页展示的数据太多表格整体高度超出屏幕最大高度，导致整体屏幕出现滚动条，在滚动查看数据的时候表格头部也会随之进行向上滚动体验非常不友好，所以就需要当表格高度超出屏幕高度时根据屏幕的最大高度设置表格内部滚动条。 阅读详情

样式：

/* 表格 */
/*.table 为全局表格自定义样式*/
.table .ant-table-body,.table .ant-table-header{
    overflow-y: auto !important;
}

html代码：

<a-table class="table" :scroll="{ y: 550 }"></a-table>

 

收录于
ant design vue

当前文章被收录于：

ant design vue
9 篇文章 3 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Ant Design Vue Table 4.x 滚动条异常排查：解决双滚动条与表头错位的2个关键CSS规则 本文针对Ant Design Vue Table 4.x版本中常见的双滚动条与表头错位问题，提供了2个关键CSS解决方案。通过分析问题根因并给出具体代码示例，帮助开发者快速修复滚动条异常，优化表格交互体验，适用于高度自适应和固定表头场景。 阅读详情

相关推荐

Ant Design Vue Table 动态高度与固定表头：从官方示例到实战避坑指南

本文详细解析了Ant Design Vue Table组件实现动态高度与固定表头的实战技巧，针对官方示例的局限性提供了优化方案。通过响应式高度计算、CSS样式穿透和自定义Hook封装，解决表格滚动条错位、列宽自适应等常见问题，帮助开发者提升后台管理系统数据展示体验。

380

antd 设置表格数据超过多少条展示滚动条

antd 设置表格数据超过8条展示滚动条，要滚动条需要制定表格的高度，用逻辑与修饰符可以实现，不用再判断没有8条的时候y的情况。 <Table size="small" loading={tableLoading} scroll={{ x: tColumn.reduce(...

寬真 4965

Ant-Design-Vue表格固定列对齐问题的深度解析与优化策略

本文深入解析Ant-Design-Vue表格固定列对齐问题的技术根源，提供从基础CSS修复到高级配置的多级解决方案。针对企业级应用场景，详细探讨了动态高度同步、性能优化策略及现代CSS替代方案，帮助开发者彻底解决行高不对齐的常见痛点。

weixin_29009081的博客 1078

如何让Ant ＜a-table＞的高度自适应屏幕的高度/（table内容滚动条)

如果是插件自带的标签样式，就找到指定的标签样式 进行定义 在标签找对的情况下如果不生效是没有附加上样式，需要加一个.....

mkijnbgt的博客 9618

Ant Design Vue Table 4.x 固定表头+高度自适应：3种方案对比与1个CSS终极解法

本文深度解析Ant Design Vue Table 4.x实现固定表头与高度自适应的3种技术方案，包括原生sticky属性、Composition API Hook和CSS样式穿透方案，并提供终极CSS变量动态计算解法。针对企业级后台管理系统的大数据量展示、复杂操作界面等场景，详细对比各方案优缺点，帮助开发者高效解决表格高度自适应与表头固定的技术难题。

weixin_30797199的博客 415

Ant Design表格组件避坑指南：为什么固定列会导致表头错位？原理+修复

本文深入解析了Ant Design Vue的a-table组件在使用固定列功能时，表头与内容错位的根本原因。核心在于滚动条出现导致的CSS布局冲突，并通过负边距（margin-bottom: -8px）进行动态补偿。文章提供了从全局样式覆盖到动态计算修复的多种解决方案，并推荐使用JavaScript动态修正方案以实现最佳兼容性。

weixin_29001423的博客 411

vue项目 当超出一定的高度或者宽度时显示滚动条

当超出高度或者宽度时显示滚动条.

m0_61096379的博客 5248

从用户视角看Ant-Design-Vue表格：如何优雅解决固定列对齐问题

本文深入解析Ant-Design-Vue表格组件在固定列场景下的行对齐问题，提供从CSS覆盖到动态高度同步的六大实战解决方案。针对不同技术栈和项目需求，详细对比各方案的实现难度与适用场景，帮助开发者优雅解决固定列对齐难题，提升数据展示的一致性和用户体验。

weixin_29000991的博客 453

五、前端：解决表格table overflow: auto属性 固定表头，滚动表头以下内容@2019

个人说明：个人用到了table 滚动overflow想要精致的方法固定表头，百度没怎么 =搜到合适的，就试了一下 代码 <table id="table1" class="table table-striped table-bordered table-hover" style="margin: 0px;"> <thead> <tr> &...

帅夕夕的伯客 1973

《Ventoy 制作系统安装 U 盘的具体步骤》

然后您可以在电脑的磁盘管理中对 U 盘进行快速格式化，选择 FAT32 或 NTFS 文件系统。至此，Ventoy 系统安装 U 盘就制作完成了。您可以在需要安装系统的电脑上，从 U 盘启动，然后选择相应的系统镜像进行安装。安装完成后，将您需要的操作系统镜像文件（如 Windows、Linux 等的 ISO 格式镜像）复制到 U 盘的根目录。在安装程序中，选择您插入的 U 盘设备，确保选择正确，以免误操作。2. 确认选择的 U 盘盘符正确，防止误操作导致其他磁盘数据丢失。点击“安装”按钮，等待安装完成。

jiyiwangluokeji的博客 2672

FPGA 学习系列（2）：Verilog 语法基础

Verilog 由门级建模数据流建模行为建模门级建模（Gate Level Modeling）：使用基本逻辑门描述电路，接近硬件物理结构。数据流建模（Data Flow Modeling）：使用assign语句进行组合逻辑建模，类似数学方程式。行为建模（Behavioral Modeling）：使用always代码块和if-elsecase等控制语句建模，抽象程度较高。Verilog 代码一般由模块（module）组成，每个模块描述一个独立的硬件功能。

Azperk的博客 989

ant design 自适应高度表格_Ant Design vue table 自适应页面高度

表格(table)可能是在业务开发的时候，用到的最多的组件，Ant Design vue table 也有着一套十分强大的API，而其中有一项开发时，可能希望表格可以随着当前页面的分辨率，来动态调整表格的固定高度，使整个页面更加美观性或者适用性。一、说明：首先，用到的是table自带的API【:scroll="{ x: 1300,y: 400 }"】其中x指横轴滚动条设置，这里主要说的是y轴，以上...

weixin_39972777的博客 8224

QSPI Flash的原理与QSPI时序的Verilog实现

本节主要是讨论QSPI(Quad SPI，四线SPI总线)的相关内容。我的开发板上有一片型号是W25Q128BV的Quad SPI Flash存储器，本文将以它为例子来说明QSPI操作的一些内容。

Go Forward Forever! 4166

基于ant-design-vue 1x表格组件实现虚拟滚动

基于ant-design-vue@1x表格组件实现虚拟滚动，解决一次性加载大量数据造成的性能问题

FortheOne的博客 2149

5实践报告撰写

一 项目流程 明确标准 确定分析目标 寻找分析数据 清洗数据 描述性分析 诊断性分析 提出建议 撰写报告 二 确定分析目标 什么是你感兴趣的？ 什么是你熟悉的？ 什么是你擅长的？ 1 电商零售行业 商品销量分析 价格分析 评价分析 ...... 2 自媒体行业 广告投放力度分析 广告投放回报分析 不同类型的产品分析 ...... 3 金融行业 股票价格分析 信贷业务违约分析 客户画像分析 ...... ...

waywardG的博客 2833

【实际操作】DenseFusion复现过程详解-YCB-Video数据集

这一篇是在YCB-Video数据集上的训练和测试过程。本次实验建立在实现LineMod数据集训练基础之上，因为前期的环境搭建都是一样的。首先，需要下载YCB-Video数据集，可以自己找找百度网盘资源，大概有两百多G。把下载下来的数据放在/work/DenseFusion/datasets/ycb/下并命名为YCB_Video_Dataset。同样的，激活自己的环境并进入 /work/DenseFusion/下，用命令：./experiments/scripts/train_ycb.sh出现以下内容开始训练

weixin_44564705的博客 3564

ant design vue table 高度自适应_element Table组件固定表头且高度自适应

问题element是vue功能比较全的后台管理系统UI，但是已经不维护了，在一些细节上还是有一点问题，项目中遇到一点问题，如下图：当出现横向滚动条的时候，滚动条在下方，向右滑动的时候表头就看不到了解决方案1、出现超宽和超高的列有可能是某个单元框文字太多可以加一个 :show-overflow-tooltip="true"，超宽以后就会显示...，然后会加一个hover的tips2、Table组件提...

weixin_39603132的博客 2113

芯片研发完整全流程

芯片研发全流程可分为需求与架构设计、前端逻辑设计、后端物理设计、晶圆制造、封装测试五大阶段，涉及16个核心步骤。研发过程需要多学科交叉协作，包括微电子、物理、材料、计算机等。关键注意事项包括验证优先、工艺约束遵循、可测性设计等。芯片设计需要绘制纳米级精度的物理版图，而非传统工程图纸，需使用专业EDA工具而非KiCad这类PCB设计软件。完整研发流程具有高投入、高风险特点，需严格遵循行业标准和规范。

weixin_44520581的博客 236

Ant Design Vue Table 表格内容高度自适应+固定表头踩坑

对于非专业前端开发者来使用 Ant Design UI 组件来开发企业级后台管理系统来说是非常不错的选择，但这并不意味着我们能够用好这个框架，因为 UI 交互上和有许多细节上的问题对于非专业前端来说并不容易解决，最近在使用 Table 组件时就遇到一个小坑，特此记录一下解决的方法。

三劫散仙 1万+

Halcon实例转OpenCVSharp--粘连物体分割与计数(基于距离变换+分水岭算法) (附源码)

本文作者Color Space，文章未经作者允许禁止转载！ 本文将介绍OpenCVSharp应用实例--粘连物体分割与计数(基于距离变换+分水岭算法)！ 本文使用的OpenCVSharp版本---》v4.5.3。 实现目标：将下图中的硬币分割出来并计算数量。 预期效果图： ...

Color Space的博客 2420

YOLOv11知识蒸馏实战：让小模型拥有大模型90%精度，速度提升3倍的终极教程

在self.alpha = alpha # 蒸馏损失权重self.temperature = temperature # 温度系数，控制分布平滑度# 输出分布蒸馏（KL散度损失）# 中间特征蒸馏（MSE损失，对齐中间层特征）# 总蒸馏损失知识蒸馏是YOLOv11在“小模型高性能部署”场景的“破局之法”——它让小模型能“站在大模型的肩膀上”，兼具速度与精度。从损失函数定义到多阶段训练，再到实战落地，本教程已为你铺就了一条清晰的路径。

m0_64661770的博客 803

关于Ant Design of Vue中 的a-table一些使用问题

1.添加行点击及复选框 <template> <div> <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :dataSource="data" :c...

王等等csdn的博客 2万+

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

Antd vue 和 element的表格高度根据浏览器高度变化

Antd vue 和 element的表格高度根据浏览器高度变化

weixin_47437528的博客 1920

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

关于ant-design-vue的表格高度自动计算(ant-design-vue版本: v3.2 vue版本: v.3.2)

/ 对tableScrollH的赋值会导致parent的高度异常, 在触发parent的高度变化时,可以先把计算函数关闭, 高度变化后, 再重新绑定监听。// 传入setup里变量的key接收新的计算值 返回get函数(手动调用计算) bind/remove手动绑定/卸载resize事件的监听。// 用于计算a-table的滚动区域高度(table父级容器 - table自身的thead高度 = 允许滚动的高度)console.log(“调用计算函数”, res);// thead dom获取。

Motong_Lee的博客 2564

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

ant design vue table表格边框对不齐的情况

ant design vue + table

yeee1128的博客 1104

ant design 自适应高度表格_element Table组件固定表头且高度自适应

问题element是vue功能比较全的后台管理系统UI，但是已经不维护了，在一些细节上还是有一点问题，项目中遇到一点问题，如下图：当出现横向滚动条的时候，滚动条在下方，向右滑动的时候表头就看不到了解决方案1、出现超宽和超高的列有可能是某个单元框文字太多可以加一个 :show-overflow-tooltip="true"超宽以后就会显示...，然后会加一个hover的tips2、Tabl...

weixin_36035610的博客 2530
上一篇： 【redux】redux和react-redux的学习
下一篇： 【vue && js】省市区js数据转为tree结构
点赞 1
评论 1
书签 书签 3
谭CV
谭CV
博客等级 码龄9年 73粉丝 85原创
+ 关注 专栏目录 订阅专栏
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值