如何在React Table中修改单元格宽度，解决渲染宽度大于配置值问题

React Table 宽度配置不生效、列被拉伸是默认自动布局模式导致的，按以下步骤调整即可：

1. 给表格根元素添加固定布局样式，禁用浏览器自动分配列宽的默认行为

.react-table-root {
  table-layout: fixed;
  width: 100%; /* 按需调整为实际容器宽度 */
}

2. 调整Status列的配置，新增maxWidth限制避免被拉伸，同时把单元格内部的marginLeft改为paddingLeft避免内容溢出，同步调整宽度数值覆盖边距占用的空间

{
  Header: useTranslactionFunc('Status'),
  accessor: 'status',
  width: 64, // 原40px + 1.5rem(约24px)边距 = 64px，可按需微调
  minWidth: 64,
  maxWidth: 64, // 关键：限制最大宽度和最小、基础宽度一致，禁止拉伸
  Cell: (props: CellValue) => (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingLeft: '1.5rem', // 替换marginLeft，避免内容超出单元格边界
      }}
    >
      {props.cell.value ? (
        <PlayCircleOutlineIcon
          style={{
            color: theme.palette.success.main,
          }}
        />
      ) : (
        <NotInterestedIcon
          style={{ color: theme.palette.error.main }}
        />
      )}
    </div>
  ),
}

3. 给后续的"Użytkownik/Rola"列添加自适应配置，自动填充剩余容器宽度，自然就会紧贴Status列

{
  Header: 'Użytkownik/Rola',
  accessor: 'userRole', // 替换为你实际的accessor字段
  flex: 1, // 关键：占满剩余所有宽度，不需要额外设置固定宽度
}

如果你使用的是React Table v8版本，只需要把列配置里的width/minWidth/maxWidth替换为size/minSize/maxSize即可，其余逻辑通用。

内容的提问来源于stack exchange，提问作者marcinb1986