Ant-design: 😨 3.11.3 之后单元格包含长数字或长单词时表格对齐损坏

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

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

超长连续字段（长数字和长单词） 破坏表格布局的问题（即使你指定了列的宽度也会被挤开），之前组件内默认加过 word-break: break-word; 去纠正此类布局，又会引起 https://github.com/ant-design/ant-design/issues/13624 的问题。（截图）

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

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

还可以和 https://github.com/ant-design/ant-design/issues/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 见：https://github.com/ant-design/ant-design/pull/17284

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

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

https://codesandbox.io/s/3y60m0wvwp

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

https://codesandbox.io/s/4zlwnrx734

@yoyo837 Bingo! 就是 https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241 的问题。

同样的问题，请问如何解决？

但是，现在这个改动是不是算breaking change，现在只能回退到3.10.10的版本，不然设置的width都不生效，而原来有大量的页面都是通过设置width来限制宽度的。

@vxzhong 只能先自己补

  .ant-table-fixed {
    table-layout: fixed;
  }

  .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
  }

然后尽量给每个列指定列宽，以及 https://github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 。
正常升级antd, 解决方案合入后再删掉。

这个问题还没有解决啊----

还有一种问题，表格创建时 表格单元格内的文本是个枚举值，比如就是 'status' ，此时单元格已经设定好宽度，并且单元格未折行，后面通过请求，渲染为中文 '整体输出状态'， 此时单元格折行了，导致这个单元格对应的行高度变高，但是这一行 对应的fixed 的单元格 高度没变，出现表格 错行 的情况，这个和浏览器没关系，ant版本是2.x。求解决啊

设置table属性 table-layout:fixed; 宽度即生效

设置table属性 table-layout:fixed; 宽度即生效

fancy, man, fancy!!

设置table属性 table-layout:fixed; 宽度即生效

ur the best

@zoffyzhang仅适用于固定宽度，不适用于响应宽度。

设置table属性 table-layout:fixed; 宽度即生效

虽然生效，但是固定列的话，文字超长的字段还是会撑开

@wulienen 包裹超长字段，overflow : hidden 后即可忽略超出部分

@wulienen 包裹超长字段，overflow : hidden 后即可忽略超出部分

这样列动态拉伸就不能实现省略号展开 。😂

@wulienen 包裹超长字段，overflow : hidden 后即可忽略超出部分

这样列动态拉伸就不能实现省略号展开 。😂

使用该属性会舍弃掉组件本身的动态宽度，你需要给每一列设置宽度，否则就会平均分配，如果需要文字省略显示则text-overflow: ellipsis;

.ant-table-tbody > tr > td {
空白：nowrap；
}
.ant-table-thead > tr > th{
空白：nowrap；
}

遇到了同样的问题，结合 xupengkun 和 yoyo837 的方案后完美解决了，感谢大家的努力！

问题原型
解决后：https://codesandbox.io/s/sg5r2

没解决， 多层childern， 有复选框而且文本超长。这个情况。更加解决不了

@heavenlian 给可重现 demo 我来帮你改好。

@afc163
解决了，写个循环嵌套，给每个table下面的 tr.ant-table-row-level-${i}，计算里面 展开icon偏离大小，再动态设置文本需要的宽度。……

我用css完美解决了

代码沙盒演示

.ant-table-thead tr {
  display: flex;
}
.ant-table-thead th {
  flex: 1;
}
.ant-table-row {
  display: flex;
}
.ant-table-row td {
  flex: 1;
  overflow: auto;
}
.ant-table-row td::-webkit-scrollbar {
  display: none;
}
.columns {
  display: flex;
  align-items: center;
  width: 0;
}

@ZengTianShengZ perfect .

如何自动显示和隐藏滚动条?
横向和纵向都需要支持
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ 干得漂亮！

这个问题仍然存在，应该作为主表组件的一部分真正解决，而不是应用 CSS hack。 感谢所有帮助提供修复的人，但默认情况下表格应正确呈现列标题

https://codesandbox.io/s/sg5r2

上述用户提供的此解决方案完美运行。
唯一的问题是您必须为每列指定宽度。
桌子应该真正起作用的方式是

1. 列标题应始终与正文对齐
2. 指定宽度不应该是黑客或强制性的。
3. 您可以指定百分比的宽度。 基于此，它将是总表格宽度的百分比或以数字指定的固定宽度。
4. 所有其他列将根据固定或百分比宽度分布后剩余空间的内容自动调整。

检查http://w2ui.com/web/demos/#!grid/grid -23 作为参考。
这是一个非常强大的网格，可惜纯 JS 没有反应。 但这一切都做得非常好。

.table_nowrap {
  table th,
  table td {
    white-space: nowrap;
  }
}

<div className="table_nowrap">
  <Table scroll={{ x: true }} ... />
</div>

js code:
const columns = [
{
title: 'goodName',
key: 'goodName',
dataIndex: 'goodName',
align: 'center',
width: 150,
fixed: 'left',
render: (item) => (item || item == 0 ? () : (--))
}];
css code:
.textOverflow{
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;
}
.maxWidth118{
max-width: 118px;
}
用了笨方法，render里套一个标签，给标签设置样式，过长显示省略号，加上title属性

已发送拉取请求：#17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
显示：弯曲；
}
.ant-table-thead th {
弹性：1；
}
.ant-table-row {
显示：弯曲；
}
.ant-table-row td {
弹性：1；
溢出：自动；
}
.ant-table-row td::-webkit-scrollbar {
显示：无；
}
。列 {
显示：弯曲；
对齐项目：居中；
宽度：0；
}

这有效，但使所有列的宽度相等。 您真的希望每列的宽度根据内容是动态的。

如何在列设置中设置百分比宽度，似乎不起作用。

实现固定列，固定的列的宽度支持百分比后表格没办法看啦 什么情况啊，是不支持百分比嘛

@jane-xxx 支持的，如果有问题可以发一个 codesandbox 来我帮你调好。

width: 150, width 设置number类型。string，没效果。

嗨，我从 antd 3 迁移到 4，我在表格中遇到问题，最初在和 3 中表格宽度是父元素宽度，但现在看来它的宽度正在调整到表格中的内容，我已经经历了医生，我找不到任何东西来解决我的问题。 我将附上两个版本的表格图像以供参考。

嗨，我从 antd 3 迁移到 4，我在表格中遇到问题，最初在和 3 中表格宽度是父元素宽度，但现在看来它的宽度正在调整到表格中的内容，我已经经历了医生，我找不到任何东西来解决我的问题。 我将附上两个版本的表格图像以供参考。

也许设置 tableLayout="fixed" 会有所帮助

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

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

给出写了 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

https://github.com/ant-design/ant-design/issues/13825#issuecomment-642389197

很抱歉，从 3.x 迁移到 4.x 后我遇到了类似的问题。
我的表在 4.x 上看起来像这样：

虽然它在 3.x 中看起来不错：

我仍然无法在简化的 Codesandbox 中重现该问题。 但与此同时，我将不胜感激任何英语帮助。

谢谢！

很抱歉，从 3.x 迁移到 4.x 后我遇到了类似的问题。
我的表在 4.x 上看起来像这样：

虽然它在 3.x 中看起来不错：

我仍然无法在简化的 Codesandbox 中重现该问题。 但与此同时，我将不胜感激任何英语帮助。

谢谢！

你设置列宽了吗？
如果您已经设置了列宽，请试试这个。 这个方法对我有用

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

这已在最近的更新中得到修复。

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

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

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