直接给 <table> 加 overflow-x: auto 无效，因其作为独立格式化上下文会无视自身溢出设置，必须由外层 <div> 控制并设 display: block、min-width: max-content 等样式来强制脱离默认渲染流。
overflow-x: auto 加在 <table> 上完全无效——滚动必须由外层 <div> 控制，且表格需脱离默认渲染流。
为什么直接给 <table> 加 overflow-x: auto 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕写了 width: 100%，也会被 <td> 中长文本、图片或未设换行的 URL 顶破，父容器根本“感知不到”溢出。
- 错误写法：
<table style="overflow-x: auto">—— 不生效 -
<table>默认行为是「撑满内容」，不是「响应父容器约束」 - 即使套了
display: flex容器，若没设min-width: 0，<table>仍会强行扩张
<div> 容器必须设哪些样式
外层容器不是加个 overflow-x: auto 就完事，漏掉任意一项都可能导致滚动条不出现、拖不动或 iOS 卡顿。
-
overflow-x: auto—— 必须；避免用scroll（空时也占滚动条高度） -
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—— 强制脱离表格渲染流，让父容器能真正识别溢出 -
min-width: max-content—— 确保表格最小宽度等于所有列内容总宽（Safari 14.1+ / Chrome 107+ 支持；旧版可退为min-width: 600px） - 禁用
width: 100%—— 否则它会反向拉伸填满父容器，彻底失去溢出前提 - 显式控制列宽：给每列
<th>和对应<td>设相同min-width（如min-width: 120px），避免滚动后错位 - 避免
table-layout: fixed+ 百分比宽度 —— 小屏下会压缩列宽到不可读，且不同设备缩放行为不一致
移动端和动态内容的隐藏陷阱
横向滚动不是“加个 overflow 就完事”的功能，真正卡点常藏在看不见的地方。
- 根容器是
<html>，不是<body>—— 若页面整体横向溢出，body { overflow-x: hidden }无效，必须写html { overflow-x: hidden } - 图片、视频、iframe 没设
max-width: 100%，会悄悄撑宽视口，导致外层<div>滚动失效 - 用了
position: sticky表头？确保<thead>不被设为display: block，否则 sticky 失效；推荐直接作用于<th>并配top: 0和background - 动态生成的表格，列宽由内容决定（如中英文混排、长 URL）？纯 CSS 很难对齐，需 JS 用
getBoundingClientRect()测量<th>宽度再赋给<td>，但别用window.onresize，改用ResizeObserver
