React.js中如何缩小Material-Table的列间距？

Material-Table的列间距默认由单元格内边距控制，直接用columnGap或普通width属性不会生效，你可以通过以下几种方式调整：

1. 直接在表格配置中自定义单元格样式 #

通过options里的cellStyle和headerStyle统一调整所有单元格的左右内边距，快速缩小列间距：

<MaterialTable
  title="你的表格标题"
  columns={yourColumnsData}
  data={yourTableData}
  options={{
    cellStyle: { padding: '0 8px' }, // 单元格上下0内边距，左右8px（可按需调整）
    headerStyle: { padding: '0 8px' }, // 表头单元格同步调整
  }}
/>

2. 用Material-UI的样式方案定制 #

如果需要更灵活的样式控制，比如只调整特定列，或者结合全局样式：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  compactCell: {
    paddingLeft: '6px',
    paddingRight: '6px',
    whiteSpace: 'nowrap', // 可选：防止内容换行，进一步节省宽度
  },
});

function YourTableComponent() {
  const classes = useStyles();
  return (
    <MaterialTable
      columns={yourColumnsData.map(col => ({
        ...col,
        // 给每列设置自定义样式
        cellStyle: classes.compactCell,
        headerStyle: classes.compactCell,
      }))}
      data={yourTableData}
      // 其他配置...
    />
  );
}

3. 固定表格布局配合列宽设置 #

开启fixed布局模式，再给列设置合适的宽度，让表格整体更紧凑：

<MaterialTable
  options={{
    tableLayout: 'fixed', // 固定布局，列宽由设置值决定
  }}
  columns={yourColumnsData.map(col => ({
    ...col,
    width: 'auto', // 自动适配内容宽度，也可以设具体值如'80px'
  }))}
  data={yourTableData}
/>

补充说明 #

你之前尝试的columnGap无效，是因为Material-Table的列间距本质是单元格的padding，不是CSS的column-gap属性，所以需要从调整内边距入手。配合你已经实现的容器宽度控制，就能达到预期的紧凑表格效果。

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