antd表列增加多列缩小，如何固定列宽？

Question

我有这张基本表：

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}
/>

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

这是我动态添加新列。

Answer 1

为您的 Table 组件添加一个 className 并重写 table 标签的内联样式。默认表格布局为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