直接给<table>加overflow-x: auto无效，因其默认为独立格式化上下文且“内容驱动宽度”，会无视自身溢出设置并撑宽父容器；必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的<div>包裹，并将<table>设为display:block、min-width:max-content、white-space:nowrap且禁用width:100%。
为什么直接给 <table> 加 overflow-x: auto 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，也会被长 URL、未换行文本或图片顶破，父容器根本“感知不到”溢出。错误写法：<table style="overflow-x: auto"> —— 完全不生效。
<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+ 百分比宽度 —— 小屏下会压缩列宽到不可读，且不同设备缩放行为不一致
固定表头 + 横向滚动怎么不崩
纯 CSS 实现固定表头 + 横向滚动，不能靠 <thead> 自带行为，得拆成两个独立表格或用伪元素模拟：
立即学习“前端免费学习笔记（深入）”；
- 最稳方案：用两个
<table>，一个只放<thead>（设position: sticky; top: 0; z-index: 1），另一个放<tbody>（设display: block; max-height: 300px; overflow-y: auto） - 列宽对齐必须靠显式约束：
<th>和<td>的width或min-width要严格一致 - 如果用了
position: sticky表头，确保其父<thead>不被设为display: block，否则 sticky 失效；推荐把 sticky 应用在<th>上，并配合top: 0和背景色
复杂点不在代码量，而在列宽对齐的脆弱性——只要一列内容动态变长（比如中英文混排、用户粘贴长链接），整个横向滚动就可能错位。这时候 JS 测量和同步列宽几乎不可避免，但别在每次 resize 里重算，用 ResizeObserver 监听容器变化更稳妥。
