已设置overflow:auto的table引发页面横向滚动问题排查求助

解决方案 #

• 将overflow: auto属性从table元素转移到它的直接父容器上，同时给父容器配置以下样式即可解决绝大多数场景下的表格横向溢出问题：

/* 表格父容器样式 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

• 给所有元素统一盒模型规则，避免边框、内边距撑宽容器导致的溢出：

* {
  box-sizing: border-box;
}

• 排查table的样式配置，若存在min-width: max-content、width: fit-content这类强制按内容撑开宽度的属性，将其覆盖为：

table {
  width: 100%;
  min-width: unset;
}

• 若需要保留表格单元格内文本不换行的样式，保留th/td的white-space: nowrap属性即可，配合父容器的横向滚动，不会触发整个页面的滚动条。

你可以用浏览器调试器的元素检查功能，逐层查看页面元素的宽度，就能快速定位到具体哪个节点的宽度超出了视口范围。

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