如何将React Table对齐到页面居中并显示在下拉选择器与标题下方

通用实现步骤 #

方案1：父容器Flex布局（适配性最优） #

给包裹页面标题、下拉选择器、表格的最外层容器添加如下CSS：

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

该方案会让容器内所有子元素（标题、下拉框、表格）统一按列排版、整体居中，自然就能实现表格显示在另外两个元素正下方的效果。

方案2：单独给表格设置居中 #

如果不需要统一调整父容器内所有元素的对齐方式，直接给表格组件添加样式即可：

.custom-table {
  /* 左右边距设为auto实现水平居中 */
  margin: 16px auto 0;
  /* 必须指定宽度，auto才会生效，可根据需求调整为固定值如1200px */
  width: 90%;
  max-width: 100%;
}

常见问题排查 #

• 如果使用Ant Design、ElementUI等组件库的表格，需要确认自定义样式优先级高于组件默认样式，必要时可添加!important临时验证
• 确认表格元素没有设置float、绝对定位等脱离正常文档流的属性
• 小屏幕下如果表格内容溢出，可在表格外层套一层容器，添加overflow-x: auto属性，保证滚动时表格整体仍然居中

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