表格水平滚动引发页面多余滚动条，如何移除且不影响其他页面？

以下是几种无需全局禁用body水平滚动的可行方案：

方案1：确保表格容器局部滚动不溢出视口 #

给表格包裹一个容器，设置容器宽度为100%并启用局部水平滚动，同时通过box-sizing避免内边距/边框导致的宽度溢出：

.table-wrapper {
  width: 100%;
  box-sizing: border-box; /* 确保padding/border不增加总宽度 */
  overflow-x: auto; /* 仅容器内显示滚动条 */
}

同时给表格设置max-width: 100%，防止表格本身宽度超出容器：

.table-wrapper table {
  max-width: 100%;
}

这种方式能让表格的滚动条完全局限在容器内，不会触发body的水平滚动。

方案2：给特定页面的body添加类名动态控制滚动 #

只在包含表格的页面给body添加专属类，针对性禁用水平滚动，其他页面保持overflow-x: scroll：

1. 在目标页面的body标签添加类：

<body class="table-page">

2. 编写CSS规则：

body.table-page {
  overflow-x: hidden;
}

如果是单页应用，可以通过路由钩子在进入/离开页面时动态添加/移除这个类：

// 示例：Vue路由钩子
router.beforeEach((to, from, next) => {
  if (to.name === 'TablePage') {
    document.body.classList.add('table-page');
  } else {
    document.body.classList.remove('table-page');
  }
  next();
});

方案3：排查并修复元素溢出根源 #

检查表格或其子元素是否存在导致页面宽度溢出的设置：

• 移除表格的固定宽度（如width: 1200px），改用width: 100%
• 检查表格列是否有固定宽度之和超出容器的情况，调整列宽设置
• 移除表格容器外可能存在的绝对定位元素，避免其超出视口范围

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