overflow-x 加在 table 上无效，因其 display: table 不支持 overflow；应加在有明确宽度且内容超宽的父容器上，并确保无 max-width 等限制；配合 table-layout: fixed、显式列宽及 white-space: nowrap 可提升响应效果。
overflow-x 为什么加在 table 上完全没用
因为 table 元素默认是 display: table，而这个 display 值不支持 overflow 属性——浏览器会直接忽略它。你看到“不滚动”，不是 CSS 写错了，是根本没生效。
真正要加 overflow-x: auto 的，是它的**父容器**（比如一个 <div>），且这个容器必须满足两个前提：
- 容器本身有明确宽度（如
width: 100%），但内部表格实际渲染宽度 > 容器宽度 - 容器内没有其他规则“锁死”宽度，比如
max-width: 100%、box-sizing: border-box配合大padding，或框架注入的display: block
调试时直接选中该容器，在开发者工具里看 computed 的 width 和 min-width，确认它是否真的超出了父级。
table-layout: fixed 不是万能解，但不用它大概率失败
table-layout: fixed 的作用是让表格按列宽声明来分配空间，而不是等所有内容加载完再算——这能避免小屏下某列被长文本撑爆，导致整体失控。
立即学习“前端免费学习笔记（深入）”；
但它只起效的前提是：table 同时设了 width: 100%，且至少部分列有显式宽度（th 或 td 上的 width）：
- 推荐用百分比（如
width: 25%），总和尽量接近 100%，否则剩余列会均分“缺口”，可能挤成一条线 - 如果全列都没设宽，
table-layout: fixed会让各列均分，小屏下依然可能过窄或换行混乱 - 配合
white-space: nowrap+text-overflow: ellipsis才能安全截断长文本；否则默认溢出可见，视觉上还是“不全”
媒体查询里只调 font-size 和 padding 是懒办法
在 @media (max-width: 480px) 里缩小字体、减小内边距，确实能让更多列勉强塞进屏幕，但这是饮鸩止渴：
- 字体太小（比如压到
10px）可读性崩坏，尤其对中老年用户 - 内边距一砍，单元格紧贴边框，视觉拥挤感更强
- 列数多于 5–6 列时，这种“压缩战术”基本失效
更务实的做法是：在这个断点下，用 display: block 彻底重构表格结构，把每行 tr 变成独立卡片，再用 ::before 伪元素把对应 th 文字注入 td 前面——语义弱了，但小屏可读性翻倍。
移动端横向滚动卡顿、拖不动？检查 touch-action
iOS 和部分安卓 WebView 中，如果滚动容器或其祖先元素设置了 touch-action: none（常见于封装的 UI 组件、轮播图、手势库），原生横向滚动会被禁用，表现为“手指划不动”或“划一下就弹回”。
解决方法很简单：
- 给滚动容器（即那个套
table的div）显式加touch-action: pan-x - 同时补上
-webkit-overflow-scrolling: touch，iOS 上滑动会顺滑很多 - 别依赖全局重置，逐层检查 computed 样式里的
touch-action值
最常被忽略的是：哪怕你没手动写 touch-action: none，某些第三方组件（比如老版本 Swiper、某些弹窗库）会在初始化时悄悄加上——得去 devtools 里翻 computed 样式确认。
