必须用div包裹table并设width:100%、overflow-x:auto、min-width:fit-content，table需设table-layout:fixed和white-space:nowrap，iOS须加-webkit-overflow-scrolling:touch。
横向拉伸不是设计目标，而是常见错误现象；真正要解决的是「表格内容撑破容器、导致页面被横向拉伸」的问题——核心是切断表格默认的宽度传播行为。
overflow-x: auto 加在 <table> 上为什么无效
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容（比如长文本、图片、未换行链接）撑开宽度。父容器根本“感知不到”溢出，滚动条自然不出现。
- 错误写法：
<table style="overflow-x: auto">—— 完全不生效 - 根本原因：表格渲染模型强制按内容计算最小宽度，
width: 100%会被内部单元格顶破 - 典型症状：页面底部出现横向滚动条，但表格区域没滚动条；鼠标悬停无拖拽感；iOS Safari 完全卡死
外层 <div> 容器必须设哪些样式
滚动必须由外层容器控制，且每一项都不可省略，漏掉任意一个都会导致滚动条不显示或无法拖动。
-
overflow-x: auto—— 必须，不能用scroll（否则空时也占滚动条高度） -
width或max-width—— 必须设具体值，如width: 100%可行，但fit-content不可靠 -
white-space: nowrap—— 防止<th>/<td>内文字换行干扰宽度计算 -
display: block—— 避免被父级 flex 布局压缩（尤其在 Bootstrap 或 Tailwind 中） - iOS 追加：
-webkit-overflow-scrolling: touch—— 否则拖拽卡顿甚至无响应
<table> 本身要改什么
表格脱离自然布局后，列宽容易错位或撑爆容器，需主动约束，而非依赖自动计算。
立即学习“前端免费学习笔记（深入）”；
-
display: block—— 强制脱离表格渲染流，让外层overflow生效 -
min-width: max-content—— 确保表格最小宽度等于所有列内容总宽，避免滚动条被“压缩掉” - 禁用
width: 100%—— 它会让表格反向拉伸去填满父容器，彻底失去“溢出”前提 - 统一列宽：给每列
<th>和对应<td>设相同min-width或width，否则滚动后表头与内容错位 - 避免在
<td>内用flex或position: absolute—— 它们会干扰滚动区域检测
固定表头 + 横向滚动怎么不崩
纯 CSS 实现固定表头必须拆开处理，<thead> 不能设 display: block，否则 position: sticky 失效。
- 最稳方案：两个独立
<table>，一个只放<thead>（加position: sticky; top: 0; z-index: 1），另一个放<tbody>（设display: block; max-height: 300px; overflow-y: auto） - 列宽对齐靠显式控制：
<th>和<td>都设相同min-width，别用table-layout: fixed配百分比宽度 - 动态列宽场景（如中英文混排、URL）需 JS 辅助：
ResizeObserver监听<th>宽度，再同步赋给对应<td>的min-width
横向滚动不是加个 overflow 就完事，关键在「谁控制滚动」「谁脱离渲染流」「谁保证列宽一致」三层配合。最容易被忽略的是 iOS 的 -webkit-overflow-scrolling: touch 和表头/内容列宽不同步——这两点一漏，滚动就形同虚设。
