直接给<table>加overflow-x: auto无效，因其属独立格式化上下文，会无视自身overflow声明；必须用<div>包裹并设overflow-x: auto、display: block、white-space: nowrap等，且<table>需设display: block和min-width: max-content。
直接给 <table> 加 overflow-x: auto 没用——浏览器根本不认这个设置，滚动必须由外层 <div> 控制，且表格得主动“脱离默认渲染流”才能被约束。
为什么 overflow-x: auto 加在 <table> 上完全无效
表格是独立格式化上下文，它会无视自身 overflow 声明，优先按内容撑开宽度。哪怕写了 width: 100%，一个没换行的长 URL、图片或连续英文单词就会顶破父容器，导致外层根本“感知不到”溢出。你看到没滚动条、拖不动、或者滚动条灰掉，八成是卡在这一步。
<div> 包裹容器必须设哪些样式
只加 overflow-x: auto 远远不够，漏掉任意一项都可能让滚动失效或 iOS 卡死：
-
overflow-x: auto和overflow-y: hidden（防意外纵滚） -
width或max-width（如width: 100%；fit-content在旧 Safari 中不可靠） -
white-space: nowrap（防止<th>/<td>内文字换行干扰总宽计算） -
display: block（避免被父级 flex/grid 压缩，尤其在 Bootstrap 或 Tailwind 中） -
-webkit-overflow-scrolling: touch（iOS Safari 必加，否则拖拽松手即回弹）
<table> 本身要改什么
让它响应外层溢出控制，但改完会破坏列对齐——这是最常被忽略的副作用：
立即学习“前端免费学习笔记（深入）”；
- 必须加
display: block（否则仍走表格布局算法，无视父容器约束） - 禁用
width: 100%（它会让表格反向拉伸填满，彻底失去“溢出”前提） - 推荐加
min-width: max-content（确保最小宽度 = 所有列内容总宽；Safari 14.1+/Chrome 107+ 支持；旧版可退为min-width: 600px） - 显式控制列宽：给每列
<th>和对应<td>设相同min-width（如min-width: 120px），避免滚动后错位
移动端和小屏特别容易踩的坑
横向滚动不是“加个 overflow 就完事”的功能，真正卡点常藏在看不见的地方：
- 根容器是
<html>，不是<body>——若页面整体横向溢出，body { overflow-x: hidden }无效，必须写html { overflow-x: hidden } - 别用
table-layout: fixed配百分比宽度——小屏下会压缩列宽到不可读，且不同设备缩放行为不一致 - 如果列宽动态变化（比如中英文混排、含图标或图片），纯 CSS 很难对齐，得用 JS 测量
getBoundingClientRect()并同步min-width - 固定表头时，
<th>要设position: sticky+top: 0，且必须和对应<td>有相同width或min-width，否则滚动后错位
