火狐浏览器中表格无法水平滚动，主因是Flex容器内子项默认不收缩导致overflow-x失效；需在表格父容器加min-width:0和overflow-x:auto，或调整table-layout、移除固定高度，必要时用wrapper强制创建滚动上下文。
火狐浏览器中部分网页表格无法水平滚动，通常是因为表格被嵌套在 Flex 容器内时，其子项默认不收缩以适应内容宽度，导致 overflow-x: auto 失效，即使外层加了滚动容器，表格仍被压缩或文字换行，根本看不到横向滚动条。
检查并修复 Flex 容器中的表格滚动失效
这一步必须先确认当前布局是否为 Flex 布局。打开开发者工具（F12）→ 选中表格外层容器 → 查看右侧“计算样式”面板，搜索 display 属性。若显示为 flex 或 inline-flex，则进入本方案。
方法一：直接在表格父容器上添加关键样式
找到包裹
的那个 div（通常是 class="table__outer" 或类似语义类名），在它的 CSS 中追加两行：
min-width: 0；overflow-x: auto
注意：这两行必须同时存在，缺一不可。仅加 overflow-x: auto 不生效，因为 Flex 子项默认 min-width: auto 会阻止内容超宽触发滚动；而只加 min-width: 0 不加 overflow-x: auto，则没有滚动能力。
方法二：若无法修改 CSS 文件，可用开发者工具临时验证
右键表格外层 div → “检查元素” → 在右侧“样式”面板中点击“+”号新增规则 → 输入：min-width: 0; overflow-x: auto; → 回车。此时表格应立即出现水平滚动条。验证有效后，将该规则写入项目 CSS。
绕过表格自身 layout 冲突（针对 Element-UI 或自定义 table-layout: fixed）
当表格设置了 table-layout: fixed 或 height: 100% + max-height 组合，尤其配合单元格合并（rowspan/colspan）时，火狐渲染引擎易因尺寸计算偏差导致滚动区域塌陷。此问题在 Firefox 122+ 已有改善，但旧版本及复杂合并场景仍常见。
第一步：移除表格上显式的 height: 100% 和 max-height
这两项会强制表格高度截断，使 overflow-x 失去作用边界。保留 auto 高度，让表格自然撑开。
第二步：禁用 table-layout: fixed（除非列宽必须严格等分）
fixed 布局下，火狐对 colspan 单元格的宽度回溯计算不准确，容易导致整体宽度误判。改为 table-layout: auto 后，浏览器按实际内容重算列宽，滚动更可靠。
第三步：确保最外层滚动容器有明确宽度约束
比如父级是 flex 容器且设了 flex: 1，则该滚动容器需有 width: 100% 或 max-width: 100vw，否则火狐可能将其宽度解析为 content-fit，进而忽略 overflow-x。
终极兜底：用 wrapper div 强制创建滚动上下文
当上述方法均无效，尤其是遇到老旧 CMS 或第三方嵌入代码无法修改时，可手动插入一层 wrapper。
在表格外层 DOM 中，用开发者工具临时包裹：
注意：wrapper 必须设 display: block，不能是 inline 或未声明 display 值，否则在火狐中可能被忽略溢出行为。
如果页面由 Vue/React 渲染，可在组件模板中直接加该 div，并绑定 class 防止样式污染。此 wrapper 是独立滚动上下文，不再受外层 Flex 行为干扰。
