antd表格表头固定，含有纵向下拉，表头和表格内容信息错位问题解决

最新推荐文章于 2024-12-08 15:18:59 发布

原创最新推荐文章于 2024-12-08 15:18:59 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #javascript

本文主要介绍了在使用antd组件库中，遇到表格表头固定且包含纵向下拉时，出现表头与表格内容信息错位的问题。通过分析和实践，提出了有效的解决方法。

antd表格表头固定，含有纵向下拉，表头和表格内容信息错位问题解决

- 复现
- 解决方法

出现的样例

复现

固定表头，设定百分比宽还是会出现这样的情况

在这里插入图片描述

解决方法

.ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body{
    overflow-y: overlay !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_22040725

关注关注

2
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

antd 表格table动态添加columns后表头滚动位置异常

weixin_55869175的博客

11-20

708

在table需要动态添加列columns，添加到超出宽度，存在滑动滚轮的时候。但是表格内容不会变化。动态 columns 看起来会有时机问题。我用的是antd 4.x版本，听说5.x后解决了这个bug。

Vue中el-table追加行后固定列滚动错位问题

qq_39753413的博客

07-12

3591

Vue中el-table追加行后固定列滚动错位问题偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......

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

antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

weixin_39614831的博客

12-21

2080

一、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在，反正3.16.2版本是存在这个问题的，如果是3.24.0之前的版本估计只能通过修改css样式解决。按照官网说的：1、若列头与内容不对齐或出现列重复，请指定固定列的宽度width。如果指定width不生效，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。2、建议指定scroll.x为...

解决Antd Table组件表头不对齐的问题

01-18

背景：在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动但是在添加了该属性之后，经常会出现表头不对齐的问题：针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）；如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式（因为t

antd——table样式：表头和表体错位问题

热门推荐

yehaocheng520的博客

12-27

1万+

今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column

【样式问题】Antd Table【表格】实现表头固定时，与内容不对齐问题

窝窝头的博客

05-17

9743

目录：版本说明问题问题分析解决办法一、版本说明 "ant-design-vue": "^1.3.5" 二、问题描述如下 2.1、按照官网设置过以下属性值，发现可以滚动，但是与内容错位啦 :scroll="{x: 1200, y: 720}" 三、原因分析： 3.1、查看官方文档，这里，发现文档的提示如下：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段

antd表格表头错位问题

04-28

总之，antd表格表头错位问题的解决方法就是关注表格和表头的宽度设置，确保表头的每一列宽度和表格一致即可。除此之外，我们还可以参考antd官方文档和社区中对于这个问题的讨论，多学习和积累经验，提高我们的开发...

冻结表格，表头固定，行头国定，列头固定

03-31

标题“冻结表格，表头固定，行头固定，列头固定”所涉及的知识点是关于如何在表格中保持表头、行头和列头在滚动时始终可见。以下是这些功能的详细说明： 1. **冻结表格**：冻结表格是一种功能，它允许用户在滚动...

antd 表格列宽自适应方法以及错误处理操作

01-18

当不给某列设置宽度时这一列的...这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新列宽度是由内容撑开的, 所有新列比原列短, 就出现了空缺表格空缺结论：所有被定位的列一定要

使用antd的table表格自定义表头加样式

最新发布

m0_69892739的博客

12-08

1008

在项目开发中遇到一个这样的需求，要给table表格的上层去加一个样式，1-12月上定义样式。其实也就是表头分组children，然后去单独更改title加样式；【记录自己开发中遇到的问题~】并且这里还有一个问题，给当前月份字段进行颜色区分；详细用法其实可以看Antd Table的表头分组用法以下附上源码【仅测试】：附上css样式：效果图：

ant design vue中a-table固定头和列后出现行内容不对齐的情况

weixin_42043532的博客

02-19

5828

如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题 mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.

ant table 固定列后显示错位

zhuangjiajia09的专栏

01-12

4586

在table中经常最后一列用于显示操作按钮，所以常将此列固定于最右侧不动，这样一来这固定的最后一列就脱离的原来的table body 自己单独是一个body，所以当前方列中有图片，或者其他内容比一行文字占位大的时候会将行高撑开，而固定在最右侧的一列不能被撑开，所以就导致了显示错位的结果。之前一直查网友的解决方案，绝大多数都是说给每一列设定width，但是并不好用，于是我就给table的td设置了固定高度。问题解决。 .wrap /deep/ .ant-table-tbody > t

关于ant-designa固定表头和列对不齐的问题最简单解决方案

weixin_44481459的博客

06-04

2783

最近在用ant-design开发react项目，因为所用版本为3.0X，所以遇到了一些问题 1. 表头和列对不齐看了官方文档，给每个表头都加了宽带，但是最后一列后会有空余，按推荐方法，还是没解决，最后F12了下，看了dom结构，改了一下代码，完成 .ant-table-fixed-header .ant-table-scroll .ant-table-header { min-width: 0px !important; } （要想表头自适应的话，最好用百分比） ...

VUE-Antd 表格表头和内容没有对齐错误

skybot的专栏

12-24

1249

初学VUE

antd里表格scroll设置y轴滚动错位问题

m0_63113719的博客

04-01

894

给表格增加y轴后，然后设置了自定义滚动条样式，表头就和表体错位了，调试了半天也没搞好，怎么解决啊，大佬们！

antd 表格错位问题

xiaocuizao的博客

11-04

1991

用antd table表格时，设置每一列的宽度，但是已经设置了，却还是错位。后来经过查找资料，发现最后一列就不用设置的话，就不会再错位，因为antd会自己给最后一列分配宽度。原因：有可能是我们列设置的宽度不合理（一般情况是设置的宽度较小），就会错位。这个时候，只需要调整宽度就好 ...

antd table横向滚动条样式自定义

qq_41916378的博客

11-24

3575

antd table横向滚动条样式自定义

antd 4 表格加scrolly 并且加fixed后错位

lixinhua_man的博客

05-17

746

right: 0!important;

使用antd的a-table在vue中实现表格表头纵排列

yodoyskts的博客

09-23

1493

使用antd的a-table在vue中实现表格表头纵排列