Skip to content

😨 Table align broken when cell contains long number or long word after 3.11.3 #13825

@yoyo837

Description

@yoyo837
Contributor
  • I have searched the issues of this repository and believe that this is not a duplicate.

#13774 (comment)
不用设置x即可重现

Version

3.11.3 +

Environment

macos 10.14.2 chrome 71

Reproduction link

Edit on CodeSandbox

Steps to reproduce

打开重现链接即可见

What is expected?

y设置后列头对齐

What is actually happening?

对不齐

Activity

lidianhao123

lidianhao123 commented on Dec 26, 2018

@lidianhao123
Contributor

你这个情况加上固定宽度就解决了

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 200,
  },
  {
    title: "Address",
    dataIndex: "address",
    width:200,
  }
];
afc163

afc163 commented on Dec 26, 2018

@afc163
Member

超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起 #13624 的问题。(截图

所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。

columns={[
  ...
  textWrap: 'word-break',
]}

还可以和 #5753 一起做,支持

columns={[
  ...
  ellipsis: true,
]}

注意,在 3.24.0 之前,你需要针对超长字段的列增加折断样式:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

已经在 3.24.0 里解决了超长字段破坏列对齐的问题,并增加了省略功能,具体 API 见:#17284

yoyo837

yoyo837 commented on Dec 26, 2018

@yoyo837
ContributorAuthor

@lidianhao123 我的表格都有固定宽度,Reproduction link 里的不用写也能重现,就没写。

afc163

afc163 commented on Dec 26, 2018

@afc163
Member

@yoyo837 你这个例子应该写了 width 就能修正了,这种情况确实要写的,好像不是我说的上面的情况。

afc163

afc163 commented on Dec 26, 2018

@afc163
Member
afc163

afc163 commented on Dec 26, 2018

@afc163
Member

给出写了 width 也对不齐的 demo 再 reopen 吧。

yoyo837

yoyo837 commented on Dec 26, 2018

@yoyo837
ContributorAuthor
reopened this on Dec 26, 2018
afc163

afc163 commented on Dec 26, 2018

@afc163
Member

@yoyo837 Bingo! 就是 #13825 (comment) 的问题。

81 remaining items

muzishuiji

muzishuiji commented on Jun 11, 2020

@muzishuiji

超短的内容也会导致宽度的设置失效.~
image
image

请教下大佬上述情况怎么处理?

muzishuiji

muzishuiji commented on Jun 11, 2020

@muzishuiji

给出写了 width 也对不齐的 demo 再 reopen 吧。

超短的内容也会导致宽度的设置失效.~

超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起 #13624 的问题。(截图

所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。

columns={[
  ...
  textWrap: 'word-break',
]}

还可以和 #5753 一起做,支持

columns={[
  ...
  ellipsis: true,
]}

注意,在 3.24.0 之前,你需要针对超长字段的列增加折断样式:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

已经在 3.24.0 里解决了超长字段破坏列对齐的问题,并增加了省略功能,具体 API 见:#17284

#13825 (comment)

yepyeel

yepyeel commented on Jul 15, 2020

@yepyeel

I'm sorry but I'm having a similar issue after migrating from 3.x to 4.x.
My Table looks like this on 4.x:
image

While it looks fine in 3.x:
image

I'm still not being able to reproduce the issue in a simplified Codesandbox. But in the meantime, I'd appreciate any help in English.

Thank you!

Did you set column width?
If you have already set column width, please try this. This method works for me

<Table
    // some props...
   scroll={{ x: '100%' }} // this x should set '100%', not 'true'
 />
empz

empz commented on Jul 15, 2020

@empz

This has been fixed in a recent update.

GhostYDFQ

GhostYDFQ commented on Oct 12, 2020

@GhostYDFQ

横向拖动有垂直的白色间隙怎么解决

Oscar19921030

Oscar19921030 commented on Nov 5, 2020

@Oscar19921030

横向拖动有垂直的白色间隙怎么解决

留一些非固定列不要定宽,让它自适应

SrivathsaRaoI

SrivathsaRaoI commented on Jan 13, 2021

@SrivathsaRaoI

In antd table ,when we give width at column css of table breaks, width of column in header is not same as width of column in #body.
Screenshot 2021-01-13 200828222

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tag, Space } from "antd";

const columns = [
{
title: "Name",
dataIndex: "name",
width: 50,
render: (text) => {text}
},
{
title: "Age",
dataIndex: "age",
width: 95
},
{
title: "Address",
dataIndex: "address",
width: 120
},
{
title: "Address1234567",
dataIndex: "address1234567",
width: 145
},
{
title: "Tags",
key: "tags",
dataIndex: "tags",
width: 200,
render: (tags) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? "geekblue" : "green";
if (tag === "loser") {
color = "volcano";
}
return (

{tag.toUpperCase()}

);
})}
</>
)
},
{
title: "Action",
width: 130,
render: (text, record) => (

Invite {record.name}
Delete

)
}
];

const data = [
{
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
address1234567: "i am testing whether it is working properly",
tags: ["nice", "developer"]
},
{
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
address1234567: "i am testing whether it is working properly"
},
{
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
address1234567: "i am testing whether it is working properly"
}
];

ReactDOM.render(

, document.getElementById("container")
SrivathsaRaoI

SrivathsaRaoI commented on Jan 13, 2021

@SrivathsaRaoI

@empz @afc163 afc163 please help me to resolve the above said issue.Please reply in English.

SrivathsaRaoI

SrivathsaRaoI commented on Jan 13, 2021

@SrivathsaRaoI

Screenshot 2021-01-13 1111111
Screenshot 2021-01-13 222222222
@empz @afc163 ,I have given width of column as 75px,but as shown in the above screen shot we can se in header width will be 1px less than table body part of the column ,here column width will be 74px in header where as width of the column in table body will be 75 px in columnGroup.

empz

empz commented on Jan 13, 2021

@empz

@SrivathsaRaoI please stop tagging me. This is not the place to ask questions. If you need to file a bug on the library, create a new issue.

KiligFei

KiligFei commented on Mar 16, 2021

@KiligFei
Contributor

横向预先有垂直的白色间隙怎么解决

留一些非固定列不要定宽,让它适应

还是没有解决

yoyo837

yoyo837 commented on Mar 16, 2021

@yoyo837
ContributorAuthor

I will lock it, if still have a problem, please feel free to create a new issue.

locked and limited conversation to collaborators on Mar 16, 2021
unlocked this conversation on Mar 16, 2021
locked as off topic and limited conversation to collaborators on Mar 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @vxzhong@empz@afc163@xianghongai@miaozilong

        Issue actions

          😨 Table align broken when cell contains long number or long word after 3.11.3 · Issue #13825 · ant-design/ant-design