表格横向滚动需外层容器设overflow-x:auto、white-space:nowrap及-webkit-overflow-scrolling:touch（iOS），固定表头应分离thead/tbody并同步scrollLeft，Chrome滚轮灵敏度低时优先用event.deltaX并适当放大。
表格容器必须设置 overflow-x: auto
鼠标滚轮横向滑动不是表格本身的行为，而是容器的滚动能力。如果 table 直接放在 body 里或父容器没设限制，浏览器默认不会启用横向滚动——哪怕内容溢出也只会撑宽页面。
常见错误现象：table 宽度超屏，但滚轮只能上下、不能左右；检查元素发现父容器 overflow 是 visible 或没定义。
- 给表格外层加一个
<div>，并设overflow-x: auto和overflow-y: hidden（避免意外纵滚） - 必须同时设
white-space: nowrap（防单元格内换行干扰宽度计算） - 容器宽度建议用
width: 100%，不要用max-width，否则可能提前截断滚动区域
移动端 touch 滚动要加 -webkit-overflow-scrolling
iOS Safari 和部分安卓 WebView 默认禁用 touch 横向惯性滚动，只靠鼠标滚轮能动，手指划不动——这不是 bug，是渲染策略。
使用场景：用户在手机上点开表格页，想左右拖拽看列，结果毫无反应。
- 在滚动容器上加
-webkit-overflow-scrolling: touch - 仅对
overflow-x: auto的容器生效，且只在 iOS 有效；安卓 Chrome 通常原生支持 - 注意兼容性：iOS 16+ 已逐步弱化该属性作用，但不加仍大概率失效
固定表头时横向滚动会错位
用 position: sticky 或 JS 固定表头后，横向滚动时表头和内容列对不齐——本质是滚动容器和 sticky 元素的 scroll offset 不同步。
立即学习“前端免费学习笔记（深入）”；
性能影响：强行用 transform: translateX() 同步表头，会触发重绘，低端机卡顿明显。
- 最稳解法：把
thead和tbody分开包裹，各自套独立滚动容器，并用 JS 同步scrollLeft - 别用
overflow: hidden遮掉 tbody 滚动条再模拟——会导致滚轮事件被拦截 - 若列数少、内容不长，优先放弃固定表头，用
thead { position: -webkit-sticky; top: 0 }更轻量
Chrome 滚轮横向灵敏度低？改 wheelDeltaX
某些笔记本触控板或 Logitech 鼠标在 Chrome 下横向滚轮响应迟钝，实际 wheelDeltaX 值极小，甚至为 0，导致 scrollLeft 几乎不动。
参数差异：Firefox 返回 deltaX 稳定，Chrome 可能返回 0 或极小值（尤其 macOS 上）。
- 监听
wheel事件时，优先用event.deltaX，fallback 到event.wheelDeltaX - 若仍不准，可乘以系数放大：比如
container.scrollLeft += event.deltaX * 1.5 - 别直接阻止默认行为（
preventDefault），否则键盘Shift + ↑/↓横向滚动也会失效
横向滚动真正难的不是加个 overflow-x，而是不同设备、不同输入方式（滚轮 / 触摸 / 键盘）下滚动行为不一致，而且一旦嵌套了 sticky、flex 或 transform，样式层和 JS 层容易互相打架。调试时先关掉所有动画和 JS，纯 CSS 验证滚动是否通，再一层层加回来。
