给table加overflow-x:auto无效，必须用包裹div并设width:100%、overflow-x:auto、min-width:fit-content；iOS需加-webkit-overflow-scrolling:touch；td内文字截断需嵌套div处理。
为什么只给 <table> 加 overflow-x: auto 没用
浏览器不会让 <table> 自己产生滚动条——它不是块级可溢出容器。你加了 overflow-x: auto，但表格仍随内容无限撑宽，父容器又没约束宽度，结果是整个页面横向溢出，或者滚动条根本不出现在表格区域。
必须用一个包裹容器（比如 <div class="table-wrapper">），并满足两个硬性条件：
-
width: 100%（或max-width: 100%），确保它不脱离上下文流 -
overflow-x: auto，且不能被父级的overflow: hidden或display: flex截断
min-width: fit-content 是关键，不是可选项
表格默认会压缩列宽来适应窄屏，导致文字挤成一团、换行错乱、甚至 text-overflow: ellipsis 失效。加 min-width: fit-content 告诉浏览器：“按内容自然宽度撑开，别压我”。
兼容性注意点：
立即学习“前端免费学习笔记（深入）”；
-
fit-content在 Safari 14.1+ 和 Chrome 107+ 稳定支持；旧版 Safari 可退为min-width: 600px（根据实际列数估算） - 避免同时设
table-layout: fixed，除非你手动用<col>控制每列宽度，否则会抑制换行、加剧溢出 - 如果表格有固定表头（
<thead>），记得给th和td统一设white-space: normal，否则 Bootstrap 默认的white-space: nowrap会让长文本直接撑破容器
iOS Safari 滚动卡顿？补上 -webkit-overflow-scrolling: touch
这个属性不是“锦上添花”，而是 iOS 上横向滚动能否跟手的分水岭。没有它，用户拖拽后松手，表格常回弹、无惯性、响应迟钝。
但要注意副作用：
- 仅对 WebKit 内核有效（iOS Safari / 微信内置浏览器），安卓 Chrome 不需要
- 若容器内用了
transform、will-change或backface-visibility，可能触发合成层冲突，反而让滚动更卡——先关掉它们再测试 - 不要加在
<table>上，只加在包裹容器（.table-wrapper）上
文字溢出截断失效？别在 td 上直接写 text-overflow
td 是表格单元格，天生不支持 text-overflow: ellipsis，除非它有明确宽度 + overflow: hidden + white-space: nowrap。但设固定宽度会破坏响应式，设百分比又受 table-layout 干扰。
更稳妥的做法是结构降级：
- 给
td里文字包一层<div class="cell-text">或<p> - 给该内层元素设
width: 100%、overflow: hidden、white-space: nowrap、text-overflow: ellipsis - 移动端需动态算宽？用 JS 算
window.innerWidth * 0.7这类比例值，但仅限必要场景——多数情况用max-width: 12em+font-size: clamp(0.8rem, 4vw, 1rem)更轻量
真正难的不是加几行 CSS，而是判断什么时候该放弃 <table>。列数 > 8、行数 > 50、有嵌套操作（如编辑/筛选）时，横向滚动只是障眼法；用 display: grid + @media 重排成卡片或折叠面板，才是移动端表格的终点。但如果你只是要快速让现有表格“能看”，上面四步已经覆盖 95% 的真实报错现场。
