不修改外层容器与body，实现表格横向滚动的方案问询

问题根源 #

你遇到的滚动条显示但无法滚动的问题，核心原因有两个：

1. 表格默认会自适应父容器宽度，哪怕单元格内边距很大，也会被强制挤压收缩，不会超出.wrap的100%宽度
2. overflow-x属性对表格元素无效，必须让父容器来承担滚动的逻辑

修复代码 #

不用动body和.outer-wrap，也不用改.wrap的width，只需要给表格加一行关键样式：

.wrap {
  background-color: green;
  padding: 1rem;
  width: 100%;
  overflow-x: scroll;
  /* 可选：加上这个让padding不额外撑开容器宽度，不影响核心功能 */
  box-sizing: border-box;
}

table {
  /* 关键：让表格保持自身内容需要的最小宽度，不被父容器压缩 */
  min-width: max-content;
}

th, td {
  padding-left: 10rem;
}

原理说明 #

min-width: max-content会让表格自动计算所有单元格（包括内边距）的总宽度，确保它不会被.wrap的100%宽度限制住。当表格宽度超过.wrap时，.wrap的overflow-x: scroll就会生效，允许正常的横向滚动。

内容的提问来源于stack exchange，提问作者Sütemény András