真正起效的是table-layout: fixed配合显式列宽控制，width: 100%是其生效前提；列少语义强应转卡片堆叠，列多不可删减才用水平滚动并优化体验。
移动端表格不是“加个 width: 100% 就完事”，真正起效的是 table-layout: fixed 配合显式列宽控制，否则长文本、URL 或 Base64 字段会单点撑爆整列，用户得横向滑半分钟才能找到关键字段。
为什么 width: 100% 单独写没用
浏览器默认用 table-layout: auto，它要等所有内容（包括图片、脚本、JWT 字符串）加载完才计算列宽。小屏下，一个未截断的物流单号就能把某列拉到 400px+，其他列被压缩成一条线。必须显式设 table-layout: fixed，让列宽只看第一行 <th> 或 <code><col> 的 width 值，不依赖内容。
但注意：table-layout: fixed 必须和 width: 100% 同时存在，否则在多数移动端 WebView 中压根不触发列宽重算。
-
<th style="width: 20%">订单号</th>比 CSS 选择器th:nth-child(1)更可靠，后者在旧版 Android WebView 里常失效 - 百分比总和不必严格 100%，缺的部分由未设宽的列均分；但建议设满，避免 iOS Safari 下偶发列宽跳变
-
<col>必须紧接在<table> 开始标签后、<code><thead> 前，放错位置会被浏览器直接忽略 <h3>列数 ≥ 4 时该转堆叠，别硬撑滚动</h3> <p>字段语义强（如“下单时间”“收货人电话”“物流单号”“预计送达”）的表格，横向滚动体验极差——滑到第三屏，用户早忘了第一列是啥。这时候垂直堆叠不是妥协，是必要取舍。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>给每个 <code><td> 加 <code>data-label属性：<td data-label="状态">已发货</td> - 用
@media (max-width: 768px)包裹规则，隐藏<thead>（<code>display: none），并设<tr> 为 <code>display: block <td> 设 <code>display: block; position: relative;，再用::before { content: attr(data-label); font-weight: bold; }插入表头- 别用
float或inline-block，窄屏下换行错位率高 - 外层容器加
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 惯性滚动更顺滑） <table> 设 <code>min-width: fit-content，防文字被压缩变形；兼容性要求高时，改用具体值如min-width: 1200px- 禁用
white-space: nowrap在<td> 上，否则无空格长文本（如 JWT、URL）会直接撑破容器 <li>滚动条旁加小字提示：“← 可左右滑动 →”；Firefox/Edge 默认隐藏滚动条，可加 <code>scrollbar-width: thin或自定义::-webkit-scrollbar - 对
<td> 或 <code><th> 显式加：<code>white-space: normal; word-break: break-word;（推荐）或overflow-wrap: break-word; - 图片必须加
img { max-width: 100%; height: auto; display: block; }，且务必删掉<img alt="HTML移动端布局如何做表格？自适应展示方法" >标签上的width和height属性 - 截断方案（
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;）适合固定字段如 ID，但会丢失信息，慎用
报表类表格必须滚动？关键在顺滑和提示
后台明细、财务流水、日志列表这类字段不可删减、列数固定（如 12 列以上），水平滚动是合理选择，但原生 <table> 套 <code>overflow-x: auto 容易出问题。
文字断行和图片适配最容易被忽略
即使布局固定了，长英文、手机号、URL 还是会把列撑爆，尤其在 table-layout: fixed 下更明显——因为列宽锁死了，内容没地方逃。
最常被忽略的点是：没有一种方案能通吃所有场景。列少语义强就堆叠，列多不可删减才滚动，而邮件中根本不能用 table-layout: fixed——Outlook 用 Word 渲染引擎，完全不认这个属性。
