存在横向滚动条时如何为React Table设置右侧padding或margin

问题原因 #

你之前给TableContainer设置的右内边距/外边距不生效，是因为当表格宽度超出容器可视宽度时，容器的padding是作用在容器本身的可视区域边缘，不会延伸到溢出的滚动内容末尾，所以滚动到最右侧时看不到留白。

解决方案 #

这里提供两种适配不同场景的实现方式：

方案1：添加空占位列（兼容性最好，适配所有场景）

无需修改原有样式，直接在你的表格列配置的最后新增一列空白占位列，宽度设为你需要的留白大小即可：

const columns = [
  // 你原有所有列配置保持不变
  {
    Header: '',
    accessor: 'rightPadding',
    minWidth: 20, // 自行调整留白宽度
    sortable: false,
    Cell: () => null,
    disableSortBy: true
  }
]

不管表格是否出现滚动条，右侧都会展示固定大小的留白。

方案2：修改样式实现

如果不想加额外列，可以调整样式实现效果：

1. 先给TableContainer加上横向滚动属性：

export const TableContainer = styled.div`
  padding-top: 25px;
  justify-content: center;
  font-size: 10px;
  overflow-x: auto; // 新增，让容器接管横向滚动
`

2. 给表格组件添加右内边距，同时修改边框合并规则：

// 你的s.Table对应的样式组件新增以下属性
export const Table = styled.table`
  /* 原有样式保留，新增以下内容 */
  border-collapse: separate;
  padding-right: 20px; // 自行调整留白宽度
`

如果修改border-collapse后影响了原有表格的边框显示效果，直接使用方案1即可。

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