Ant design 表格加上scroll属性后列跟表头不对齐

立码行动

已于 2022-02-28 18:12:46 修改

阅读量4.2k

点赞数 5

文章标签： safari css html

于 2022-02-28 16:12:15 首次发布

本文链接：https://blog.csdn.net/fhdjdfhjd/article/details/123184948

版权

原因：加上纵向滚动条后，滚动条占位把行“挤短”了

解决：网上搜了两种方法

第一种方法：

可以尝试在columns里，每一项都添加一个width属性，而且这个属性的值最好是百分比

第二种方法：

在columns的最后一个列中不加width属性让他自动对齐

第三种方法：

上面的两种有时候管用，在不管用的时候只能修改css了

.ant-spin-container > .ant-table > .ant-table-content > .ant-table-scroll > .ant-table-header {
    overflow: hidden !important;
    overflow-y: scroll !important;//只加了这一句话
    margin-bottom: 0 !important;
}

结果：成功对齐

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

立码行动

关注关注

5
点赞
踩
6

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

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

qq_22040725的博客

06-05

1745

antd表格表头固定，含有纵向下拉，表头和表格内容信息错位问题解决复现解决方法复现固定表头，设定百分比宽还是会出现这样的情况解决方法 .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body{ overflow-y: overlay !important; } ...

ant-design Table组件错位/对不齐

最新发布

csdn_bk的博客

07-05

1064

在使用 ant-design-vue 的 Table 组件，在不使用分页器的情况下，让table内容固定高度，预期是出现滚动条。结果滚动条出现，表头和表内容列对不齐情况。

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

01-18

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

antd固定表头之后，列错位

qq_42453751的博客

05-07

429

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。注意，且非固定列宽度之和不要超过 scroll.x。对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。在a-table上面设置scroll.x的值，注意要大于非固定列宽度之和，我这里多加了100。最右边的剩下一个列不设置宽度，来自适应。

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

窝窝头的博客

05-17

8976

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

关于antdv表格a-table设置scroll属性后表格行错位解决方案

cabinx的博客

01-15

1万+

antdv表格a-table设置scroll属性后表格行错位解决方案 1.需求背景最近开发财务项目中使用到了UI框架antdv，使用a-table后需要设置表格一屏显示，即表格内容超过了屏幕之后显示滚动条，但是表格行内容出现错位。解决方案 1.先设置a-table的scroll属性，如下： <a-table ref="table" size="small" rowKey="id" :columns="columns"

ant design 的Table组件固定表头时不对齐

weixin_30765475的博客

03-12

1040

现在有一个表格，里面的列数是不固定的（可以重复写入数据），且列数行数都可能很多，就带来一个问题：　　必须要固定表头，但是antd 的表格组件设置了固定表格　　　　scroll={{x:1000,y:300}} 　　这个 x 必须设置且一定不能这样设置，同时columns设置除最后一行外每行的 width 　　然而并没有什么卵用 -。- 　　关键点还是在于 x ，文档中讲可以为百分数、...

antd 设置表头属性_解决Antd Table组件表头不对齐的问题

weixin_39536427的博客

12-21

1384

背景：在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动但是在添加了该属性之后，经常会出现表头不对齐的问题：针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案：1、对表格的每一行【columns】设置width属性(留出一行进行宽度自适应)；2、scroll属性中的x选择一个合适的值(或者直接设为 ...

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

weixin_42332910的博客

01-16

2025

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

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

skybot的专栏

12-24

1019

初学VUE

ant design vue a-table 表头和内容不对齐，一行代码解决问题

陈新科的博客

11-24

3710

动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...

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

lixinhua_man的博客

05-17

542

right: 0!important;

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-08

3532

关于加上scroll之后antd的table表头与表错位?你真地得考虑一下给table的column加上列宽!!!

Ant Design Mobile InfiniteScroll 组件 loadMore属性

06-06

很抱歉，我之前的回答有误。Ant Design Mobile InfiniteScroll 组件的正确属性应该是 `loadMore` 而非 `onLoadMore`。 `loadMore` 是 InfiniteScroll 组件的一个回调函数，当滚动到底部时会自动触发该函数。该函数需要返回一个 Promise 对象，在 Promise 对象中可以进行异步加载数据的操作，并在加载完成后通过 Promise 的 resolve 方法通知 InfiniteScroll 组件加载完成，使得 InfiniteScroll 组件能够继续监听滚动事件。下面是一个示例代码，演示了如何使用 `loadMore` 属性加载更多数据： ```jsx import { InfiniteScroll } from 'antd-mobile'; class MyComponent extends React.Component { state = { list: [], // 列表数据 hasMore: true, // 是否还有更多数据 }; // 加载更多数据的回调函数 loadMore = () => { // 判断是否还有更多数据需要加载 if (!this.state.hasMore) { return; } // 加载数据 fetchData().then(data => { // 将新数据合并到原有数据中 const list = this.state.list.concat(data); // 更新组件状态 this.setState({ list: list, hasMore: data.length > 0, }); // 完成加载，通知 InfiniteScroll 组件 return Promise.resolve(); }); }; render() { return ( <InfiniteScroll style={{ height: 'calc(100vh - 45px)', overflow: 'auto' }} loadMore={this.loadMore} hasMore={this.state.hasMore} > {this.state.list.map(item => ( <div key={item.id}>{item.name}</div> ))} </InfiniteScroll> ); } } ``` 在上面的代码中，`loadMore` 函数通过调用 `fetchData` 函数异步加载数据，并将新数据合并到原有数据中。加载完成后，根据新数据的长度判断是否还有更多数据需要加载，然后通过 Promise 的 resolve 方法通知 InfiniteScroll 组件加载完成。同时，还需要注意在组件状态中设置一个 `hasMore` 属性，用来控制是否还有更多数据需要加载。在 `loadMore` 函数中判断 `hasMore` 属性，如果为 `false`，则不会触发加载更多数据的操作。