ant design Table组件表头和内容宽度不对齐问题解决方案

最新推荐文章于 2024-05-28 08:41:15 发布
最新推荐文章于 2024-05-28 08:41:15 发布
阅读量1.1w 收藏 9
点赞数 5
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn948423630/article/details/90044674
版权

你看，这里表头的宽度是200没错，但内容却少了几个px，明显不对，上网找了一大堆解决方案，什么设置百分比啊，设置绝对宽度啊，还是会这样，历经千辛万苦，终于解决了

给Table组件设置这个中英文都换行的样式

style={{ wordBreak: 'break-all' }}

（中文和英文的换行机制不同）

scroll的x轴宽度是我计算出来的，没想到设置个中英文都换行的样式就解决了，其中的原理我也不清楚，但这篇文章如果能帮到别人就最好了

124756782
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
AntDesign3.9Axure组件
06-01
总之，AntDesign3.9Axure组件为产品经理和前端设计师提供了一套高效、专业且符合当前设计趋势的原型设计解决方案，它让原型设计更加便捷，同时也保证了设计品质，对于提升产品设计的效率和质量具有显著的帮助。...
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 列头和内容不对齐
风华绝代的博客
12-27 1万+
我是在已经给 每一列设置了宽的时候，依然遇到了列头和内容不对齐的情况，最后经过查询，得到的是，给最后一列不设置宽度，让其自己伸缩，就可以解决这个问题了...
调整行高列宽
最新发布
l045617的博客
05-28 176
取消隐藏：选中隐藏列的两边列-鼠标右键-取消隐藏；)快速插列：选中列-ctrl+shift+=插入一列/选中需要插入列的后方光标变化后按住shift键拖动就可以快速添加。数据补充：选择你所需要添加列的后方那一列-鼠标右键-点击插入-这样就可以插入一个空白页了。4)隐藏列：选中需要隐藏的列-鼠标右键单击隐藏（记得在查看数据后取消隐藏）。删除列：选中所需删除的列-鼠标右键-删除列/选中列ctrl+-即可快速删除列。)列宽：开始-点击格式-找到列宽和自动调整列宽，对应的是上述的两个操作。
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3367
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
antd vue 表格表头与内容列宽不一致
枯叶的博客
07-02 2678
从图片的内容可以看到表头的宽度与内容的宽度是不一致的，但是使用的是默认的antd的样式。为什么会出现这种情况呢？ 罪魁祸首是表格的 scroll 属性，可以从图片中看到该表格有一个纵向的滚动轴，虽然我们只设置了滚动轴的 Y 轴宽度，但是也会影响 X 轴，造成表头与内容列宽不一致。 解决办法： 在定义表头时，给每一列增加列宽，类似： const columns = [ { title: '账户', dataIndex: 'id', width: 120, // 解决方法 .
关于antd table 表头与表格不对齐问题
halations的博客
09-29 3918
出现这个问题一般是设置了scroll属性 解决方法：给每个表头设置width，然后最后一个可以不设置，antd会自适应最后一个。 { title:'任务类型', dataIndex:'type', key:'type', width:90, }, 如果还没解决怎么办？ 可能出现的问题是因为render的值长度大于了外面设置的width 比如 { ...
奇葩的table里<th>和<td>不等宽问题
1Ro
07-04 6249
近日遇到一个对我来说十分奇葩的问题，
ant-design-vue table 使用列头跟表格不对齐
Ben_axb的博客
06-17 2063
ant-design-vue table 列头跟表格内容对齐 百度到了说需要直接把表格头固定宽，试了下有效果但觉得的不够灵活，于是自己找到了一个较好的方法。这也解决了横向滚动条拖到底列不对齐的 相比固定宽，可以一劳永逸。 ps: // 全局中添加以下样式 .ant-table-fixed-header .ant-table-scroll .ant-table-header{ width: calc(100% - 8px);//减去滚动条的宽度 } ...
【样式问题】Antd Table【表格】实现表头固定时，与内容不对齐问题
窝窝头的博客
05-17 8707
目录： 版本说明 问题 问题分析 解决办法 一、版本说明 "ant-design-vue": "^1.3.5" 二、问题描述如下 2.1、按照官网设置过以下属性值，发现可以滚动，但是与内容错位啦 :scroll="{x: 1200, y: 720}" 三、原因分析： 3.1、查看官方文档，这里，发现文档的提示如下： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。 如果指定 width 不生效或出现白色垂直空隙， 请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
ant design的table组件实现全选功能以及自定义分页
01-18
ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...
Ant Design的Table组件去除
01-18
一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。 首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。 官方栗子 import React, { useEffect, useState } ...
ant table组件使用心得-表头不对齐解决办法
余光的博客
01-15 9714
实习期间遇到需要列表展示数据的需求，从ant开源库上拿下来示例代码如下 使用的场景时在react项目中，所有直接引入 一 使用 1.引入组件 import { Table } from ‘antd’; 2.手动写入需要渲染的数据 这里不细说了，在模版中，为你提供了很多种排列方式，有跨行显示，也有跨列显示 3.render中写table组件 &lt;Table columns={colu...
Ant Design table实现表头列宽拖拉 官方 vue-draggable-resizable的魔改版
weixin_43150546的博客
06-09 3052
Ant Design table实现表头拖拽 官方 vue-draggable-resizable的魔改版
ant design vue的table表头拖拉适应宽度。
sunmeng_sunmeng的博客
02-05 4578
在data中的columns中每一列会有固定的宽度（如果不给定宽度，拉拽则不起作用）。如果是这样的结果那么我们需要根据文档来设置components以及结合《vue-draggable-resizable》插件。 在data数据中定义， data （）{ return { components: { header: { cell: this.changeTitle } }, } } methods（）{ changeTitle(h, props, children) {
antd Table设置scroll.x，当没有数据时表头显示不全，且没有滚动条
qq_31444707的博客
12-08 6206
这个问题先看下你的style样式中看看有没有全局样式覆盖了antd-table的样式，一般出现这个问题就是吧antd-table原有的样式覆盖了，所以看下你的全剧样式，这可是一个谨慎操作。
antd Table 中设置的列宽和实际内容设置宽度的问题
热门推荐
寬真
12-16 2万+
所以这个maxWidth设置的宽度应该要小于width140才行，毕竟是不包括padding 16px的，所以这个maxWidth应该设置为124px; 这个antd table的头部和表格内容是分开的。 ...
ant design 的Table组件固定表头时不对齐
06-03
出现这种情况可能是因为表格中某些列的宽度没有设置或者设置不当导致的。你可以尝试以下方法来解决这个问题： 1. 设置表格每列的宽度，使其能够正确地对齐。 2. 调整表格的样式，使表格中的每列都能够正确地对齐。具体可以参考 ant design 的官方文档中的样式设置。 3. 如果表格中有合并单元格的情况，需要检查合并单元格的方式是否正确，以确保表格能够正确地对齐。 希望以上方法能够帮助你解决问题。如果还有其他问题，请随时向我提问。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值