表格自身设 overflow-x: auto 无效，因表格是独立格式化上下文；须用 div 包裹并设置 overflow-x: auto、width: 100%、-webkit-overflow-scrolling: touch、white-space: nowrap，且 table 设 display: block、min-width: max-content、table-layout: fixed。
直接加 width: 100% 或 overflow-x: auto 到 <table> 上基本没用——浏览器把表格当独立渲染单元，它会无视自身溢出，内容一撑就破屏，滚动条压根不出现。
为什么 <table> 自身设 overflow-x: auto 失效
表格是 CSS 中的「独立格式化上下文」，它的 overflow 属性在绝大多数浏览器（尤其是 iOS Safari 和微信 WebView）里被忽略。哪怕写了 width: 100%，只要某列里有未约束的 <img>、JWT 字符串或长 URL，整张表就会被顶宽，父容器“感觉不到”溢出，滚动条自然不会出来。
必须用 <div> 包裹并设这四条 CSS
滚动行为只能由外层容器控制，漏掉任意一项都会导致滑不动、不出现滚动条或卡顿：
-
overflow-x: auto—— 必须，不能用scroll（iOS 下空时仍占滚动条高度） -
width: 100%或max-width: 100vw—— 必须有明确宽度约束，仅靠overflow-x: auto不生效 -
-webkit-overflow-scrolling: touch—— iOS Safari 必加，否则触控拖拽卡顿或无响应 -
white-space: nowrap—— 防止<th>/<td>内文字换行干扰宽度计算
别给这个 <div> 设 height 或 max-height，否则容易触发双层滚动。
立即学习“前端免费学习笔记（深入）”；
<table> 自身要改的关键样式
表格必须脱离默认渲染流，才能响应外层容器的溢出控制：
-
display: block—— 强制变为块级元素，这是滚动生效的前提 - 删掉
width: 100%—— 否则它会反向拉伸填满父容器，彻底失去“可溢出”能力 -
min-width: max-content—— 确保表格最小宽度等于所有列内容总宽，防止滚动条被压缩消失 -
table-layout: fixed—— 配合显式列宽（如th, td { min-width: 120px; }），避免单列被长文本撑爆
对长文本单元格加 text-overflow: ellipsis + overflow: hidden，防意外撑列；<img> 必须设 max-width: 100%，否则原始尺寸 > 屏幕宽度时整表直接崩。
横向滚动还是卡片化？看列数和语义强度
列数 ≥ 4 且字段语义强（如“下单时间”“收货人电话”“物流单号”）时，硬推横向滚动体验极差——用户滑到第三屏早忘了第一列是啥。这时候该转卡片堆叠：
-
<tr>和<thead>都要设display: block/display: none - 每个
<td>加data-label属性：<td data-label="客户姓名">张三</td> - 用
td::before { content: attr(data-label) ": "; }插入列名，别用 float 或 inline-block - 断点别抄模板，实测内容开始挤压的像素值才是真实触发点（比如三列表格常在 623px 就需切换）
复杂点不在代码行数，而在表格宽度是内容、CSS 约束、渲染机制三者博弈的结果——只要有一列失控，整个横向滚动就失效。
