Chrome移动端水平溢出异常：带white-space:nowrap的表格引发页面滚动问题

问题现象 #

• 仅Chrome移动端（如iPhone SE）出现页面全局水平溢出，Firefox无此异常
• 触发源为带有white-space: nowrap属性的.hscroll-table表格：保留该属性时，表格自身可正常横向滚动，但整个页面会出现多余的横向滚动条；移除该属性，页面溢出消失，但表格单元格不换行的原有设计被破坏
• 仅给表头单元格设置white-space: nowrap时，不会出现全局页面溢出的情况

可能原因 #

这大概率是Chrome移动端的渲染Bug：当表格容器（或表格本身）配置了横向滚动（如overflow-x: auto），同时给整个表格设置white-space: nowrap时，Chrome错误地将表格的“不换行宽度”计算为超出页面可视宽度的范围，进而撑开了整个页面。而仅给表头设置该属性时，表格主体单元格的换行行为限制了整体宽度，不会触发这个计算错误。

解决方案（不破坏原有设计） #

1. 精准设置单元格的不换行属性 #

将原有的表格级white-space: nowrap改为仅作用于单元格：

/* 原代码 */
table.hscroll-table {
  white-space: nowrap;
}

/* 修改后 */
table.hscroll-table th, table.hscroll-table td {
  white-space: nowrap;
}

这种方式既保留了单元格不换行的设计需求，又避免了表格整体被错误计算宽度导致页面溢出。

2. 给表格容器添加明确的宽度约束与滚动配置 #

确保表格的父容器有严格的宽度限制和滚动设置，强制Chrome正确识别容器边界：

.table-container {
  width: 100%;
  overflow-x: auto;
}

table.hscroll-table {
  width: 100%;
  white-space: nowrap;
}

通过固定容器宽度为100%，让表格的横向滚动被限制在容器内，不会影响全局页面宽度。

3. 调整页面视口配置 #

部分场景下，Chrome移动端的视口计算存在偏差，可以尝试更新页面的视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

添加viewport-fit=cover有助于Chrome更准确地计算页面可视区域的宽度，减少溢出误判。

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