HTML/CSS表格移动端无法居中、仅桌面端对齐正常的问题咨询

根因定位 #

问题出在移动端响应式媒体查询的两处错误配置：

• 你给.tg强制设置了width: 100% !important：桌面端.tg没有固定宽度，宽度随内容收缩，margin: 0 auto可以让收缩后的表格在父容器内居中。但移动端强制表格宽度和父容器完全一致，如果表格实际内容宽度小于视口，单元格会被强制拉满，视觉上就会出现整体左对齐的错觉。
• .tg-wrap的边距设置错误：margin: auto 0px的规则是「上下边距自动、左右边距为0」，直接导致包裹表格的父容器本身就左对齐，内部的表格自然无法居中。

修复代码 #

将媒体查询部分替换为以下代码即可解决问题：

@media screen and (max-width: 1200px) {
  .tg {
    /* 替换width为max-width，表格最多占满父容器，内容不足时保持原宽度 */
    max-width: 100% !important;
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 修正边距：左右边距auto实现父容器居中 */
    margin: 0 auto;
    /* 如果需要表格和屏幕边缘留间隙，可额外加一行 padding: 0 15px; */
  }
}

修复后移动端表格会先保持和桌面端一致的内容宽度居中显示，只有当视口宽度小于表格内容宽度时，才会出现横向滚动条，不会再出现左对齐的问题。

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