You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched the issues of this repository and believe that this is not a duplicate.
To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.
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.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tag, Space } from "antd";
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"
}
];
@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.
Activity
lidianhao123 commentedon Dec 26, 2018
你这个情况加上固定宽度就解决了
afc163 commentedon Dec 26, 2018
超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过
word-break: break-word;
去纠正此类布局,又会引起 #13624 的问题。(截图)所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。
还可以和 #5753 一起做,支持
注意,在 3.24.0 之前,你需要针对超长字段的列增加折断样式:
已经在 3.24.0 里解决了超长字段破坏列对齐的问题,并增加了省略功能,具体 API 见:#17284
yoyo837 commentedon Dec 26, 2018
@lidianhao123 我的表格都有固定宽度,Reproduction link 里的不用写也能重现,就没写。
afc163 commentedon Dec 26, 2018
@yoyo837 你这个例子应该写了 width 就能修正了,这种情况确实要写的,好像不是我说的上面的情况。
afc163 commentedon Dec 26, 2018
https://codesandbox.io/s/3y60m0wvwp
afc163 commentedon Dec 26, 2018
给出写了 width 也对不齐的 demo 再 reopen 吧。
yoyo837 commentedon Dec 26, 2018
https://codesandbox.io/s/4zlwnrx734
afc163 commentedon Dec 26, 2018
@yoyo837 Bingo! 就是 #13825 (comment) 的问题。
81 remaining items
muzishuiji commentedon Jun 11, 2020
超短的内容也会导致宽度的设置失效.~


请教下大佬上述情况怎么处理?
muzishuiji commentedon Jun 11, 2020
超短的内容也会导致宽度的设置失效.~
#13825 (comment)
yepyeel commentedon Jul 15, 2020
Did you set column width?
If you have already set column width, please try this. This method works for me
empz commentedon Jul 15, 2020
This has been fixed in a recent update.
GhostYDFQ commentedon Oct 12, 2020
横向拖动有垂直的白色间隙怎么解决
Oscar19921030 commentedon Nov 5, 2020
留一些非固定列不要定宽,让它自适应
SrivathsaRaoI commentedon Jan 13, 2021
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.

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 commentedon Jan 13, 2021
@empz @afc163 afc163 please help me to resolve the above said issue.Please reply in English.
SrivathsaRaoI commentedon Jan 13, 2021
@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 commentedon Jan 13, 2021
@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 commentedon Mar 16, 2021
还是没有解决
yoyo837 commentedon Mar 16, 2021
I will lock it, if still have a problem, please feel free to create a new issue.