React Table移除最后一列空白：让三点按钮贴近列尾

以下是具体的解决方法：

• 给最后一列设置固定宽度
  在定义表格列（columns）时，为最后一列指定width或maxWidth属性，强制缩小列宽：

  const columns = useMemo(() => [
    // 其他列配置
    {
      Header: '操作',
      accessor: 'actions',
      width: 60, // 根据按钮大小调整合适的固定宽度
      Cell: ({ row }) => (
        <MoreVertIcon />
      )
    }
  ], []);
  

• 调整单元格样式，让按钮贴紧列尾
  给最后一列的单元格设置右对齐，并减少不必要的内边距，让按钮贴近列边缘：

  .react-table .rt-tr .td:last-child {
    text-align: right;
    padding-right: 8px; /* 按需调整内边距大小 */
    padding-left: 0;
  }
  

  若使用内联样式，可直接在Cell组件中设置：

  Cell: ({ row }) => (
    <div style={{ textAlign: 'right', paddingRight: '8px' }}>
      <MoreVertIcon />
    </div>
  )
  

• 开启表格固定布局（可选）
  如果表格仍自动拉伸列宽，给表格容器添加table-layout: fixed样式，确保列宽设置生效：

  .react-table-container table {
    table-layout: fixed;
    width: 100%;
  }
  

通过以上设置，最后一列会被限制在指定宽度内，按钮通过右对齐和内边距调整紧贴列尾，消除多余空白。

内容的提问来源于stack exchange，提问作者Jennifer De Goede