Antd table 添加更多列时列会缩小，如何修复列宽？

Question

我有这个基本的table:

const columns = [
  {
    title: 'Column A',
    width: 240,
  },
  {
    title: 'Column b',
    width: 240,
  },
  {
    title: 'Column C',
    width: 240,
  },
  {
    title: 'Column D',
    width: 240,
  },
  {
    title: 'Column E',
    width: 240,
  },
  {
    title: 'Column F',
    width: 240,
  }
]

const rows = [
  ...
]


<Table
  loading={loading}
  columns={columns}
  dataSource={rows}
  scroll={{ x: 'scroll' }}
  pagination={false}
/>

但是，当我添加新列时，它会缩小以适应 table 区域中的所有列。我如何防止这种情况发生，并强制 table 开始向右滚动，并使列实际上是我指定的宽度？

这是我动态添加的新列。

Answer 1

将类名添加到您的 Table 组件并重写 table 标记的内联样式。默认情况下 table-layout 是 auto，您需要将其重写为 fixed 值。他们的区别大家可以看看here

因此您的代码将如下所示：

function () {
  return (
    <Table
      className="table-wrapper"
      columns={columns}
      dataSource={rows}
      scroll={{ x: "scroll" }}
      pagination={false}
    />
  );
}

然后在样式中：

.table-wrapper table {
  table-layout: fixed !important; /* rewrite inline styles */
}

codesandbox link

Antd table 添加更多列时列会缩小，如何修复列宽？

Antd table columns are shrinking when you add more columns, how to fix column width?

html-table

antd