直接给<table>加overflow-x: auto无效，因table是独立格式化上下文，无视自身overflow设置，优先按内容撑宽；必须用设width/max-width、overflow-x:auto、display:block、white-space:nowrap及-webkit-overflow-scrolling:touch的div包裹，并将table设为display:block和min-width:max-content。
为什么直接给 <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不可靠 -
white-space: nowrap——防止<th>/<td>内文字换行干扰宽度计算 -
display: block——确保容器不被父级 flex 布局压缩（常见于 Bootstrap 或现代框架中） -
-webkit-overflow-scrolling: touch——移动端追加，否则 iOS Safari 拖拽卡顿甚至无响应
表格本身要配合哪些样式才能“配合滚动”
光靠容器还不够，<table> 必须脱离默认渲染流，才能响应外部 overflow：
立即学习“前端免费学习笔记（深入）”；
-
display: block——强制表格变成块级元素，不再受表格格式化上下文约束 -
min-width: max-content——确保表格最小宽度等于所有列内容总宽，避免滚动条被“压缩掉” - 禁用
table-layout: auto下的隐式拉伸——否则它会反向拉伸去填满父容器，彻底失去溢出前提 - 避免对
<col>或<th>使用百分比宽度 +table-layout: fixed混搭——小屏下会均分列宽，导致字段被截断不可读
垂直滚动怎么实现：为什么 overflow-y 不能直接写在 <table> 上
overflow-y 在 <table> 元素上无效，因其属于表格格式化上下文；正确做法是用固定高度的 div 包裹 <tbody> 并设置 overflow-y: auto，同时确保 <thead> 与滚动容器同级以实现表头固定。
关键点：
- 不要给
<table>、<tbody>、<tr>直接设overflow——规范明确忽略 - 包裹
<tbody>的div必须有明确max-height（推荐用max-height而非height） -
<thead>需和该div同级，否则 sticky 表头会随滚动一起动 - 若需兼容旧版 IE，
position: sticky不可用，得改用 JS 固定或双表结构
