必须用外层div包裹table并设置overflow-x:auto等样式才能实现横向滚动，因table自身不响应overflow属性；需同时设置display:block、white-space:nowrap、width:100%及iOS专用-webkit-overflow-scrolling:touch等。
直接给 <table> 或内联内容加 overflow-x: auto 基本无效——浏览器不把它当普通块级元素处理，必须用外层 <div> 显式接管滚动控制权。
为什么 overflow-x: auto 加在 table 上没反应
表格是独立格式化上下文，会无视自身 overflow 设置，优先按内容撑开宽度。哪怕写了 width: 100%，一个未换行的长 URL 或图片也会顶破父容器，导致外层根本“感知不到”溢出。
-
<table style="overflow-x: auto">—— 完全不触发滚动条 - 即使套了
display: flex容器，若没设min-width: 0，<table>仍会强行扩张 - 滚动行为必须由外部块级容器控制，且该容器要能准确判断「内容是否真超宽」
必须设置的父容器样式
只加 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 中） - iOS 必加：
-webkit-overflow-scrolling: touch（否则 Safari 拖拽松手即回弹）
table 本身要改什么才能对齐不飞走
一旦 <table> 设为 display: block，<thead> 和 <tbody> 就脱离表格布局逻辑，各列不再自动对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须加
display: block（否则仍走表格布局算法，无视父容器约束） - 禁用
width: 100%（它会让表格反向拉伸填满，彻底失去“溢出”前提） - 推荐加
min-width: max-content（确保最小宽度 = 所有列内容总宽；Safari 14.1+/Chrome 107+ 支持） - 显式控制列宽：给每列
<th>和对应<td>设相同min-width（如min-width: 120px），避免滚动后错位 - 避免
table-layout: fixed+ 百分比宽度——小屏下会压缩列宽到不可读
iOS Safari 横向滚动卡顿的真实原因和解法
不是性能差，是 WebKit 默认禁止横向 touch 滚动：touch-action: pan-y 锁死了单指横向拖动能力。
- 必须给滚动容器加
touch-action: pan-x（不能写pan-x pinch-zoom，后者会干扰双指缩放） - 避免在容器内监听
touchstart或touchmove，哪怕空 handler 也会触发 passive event warning 并降级滚动性能 - 若用了
position: sticky或同层transform动画，可能触发渲染层分离失败——此时可加will-change: scroll-position强制提升 - 测试务必真机连 Safari Web Inspector，看 Timeline 是否频繁触发 Layout；若有，大概率是某处
offsetWidth或getBoundingClientRect()被无意触发
最易被忽略的是根层溢出控制：全局漏掉 html { overflow-x: hidden }，某个没设 max-width: 100% 的 <img> 就会偷偷撑宽整个视口，让局部滚动失效。
