移动端表格需用 table-layout: fixed 配合显式列宽和 width: 100%，列少时用 data-label 堆叠，列多时用外层容器滚动并兼顾可访问性与兼容性。
移动端表格不能靠“加个 width: 100%”就完事，真正起效的是 table-layout: fixed 配合显式列宽控制，再根据语义密度决定走堆叠还是滚动——硬塞一屏十几列，用户滑到第三屏早忘了第一列是啥。
为什么直接设 width: 100% 没用
浏览器默认用 table-layout: auto，要等所有内容（长 JWT、未截断 URL、图片）加载完才算列宽。小屏下某列被撑开，整行就崩，其他列缩成一条线。必须显式声明 table-layout: fixed，它只看第一行 <th> 或 <code><col> 的 width 值来分配列宽，不依赖内容。
这个属性必须和 width: 100% 同时存在，否则在多数移动端 WebView 中压根不触发重算。别信 CSS 选择器如 th:nth-child(1) ——旧版 Android WebView 里常失效，推荐直接写内联样式：<th style="width: 20%">订单号</th>。
列少语义强？用 data-label + ::before 堆叠
字段像“下单时间”“收货人电话”“物流单号”这种，横向滚动体验极差，必须转卡片堆叠。关键是保留表头语义，不能丢信息。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<td> 加 <code>data-label属性，例如：<td data-label="状态">已发货</td> - 在
@media (max-width: 768px)里设thead { display: none }，tr { display: block }，td { display: block; position: relative } - 用
td::before { content: attr(data-label) }把列名插在前面，别用float或inline-block，窄屏下换行错位风险高 - 用外层
<div class="table-container">包裹表格，设overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 更顺滑） - 加
touch-action: manipulation，防止 iOS Safari 在滚动容器里点<input>或<select>失焦 -
table设min-width: fit-content（兼容性要求高时改用具体值如1200px），防文字被压缩变形 - 滚动条旁加提示文字：“← 可左右滑动 →”，Firefox/Edge 默认隐藏滚动条，可加
scrollbar-width: thin
列多不可删？外层容器滚动 + 手势防失焦
后台数据列表、财务明细这类字段不能删减的场景，滚动是最务实的选择，但原生 <table> 套 overflow-x: auto 容易出问题。
最常被忽略的三个点
一是 <thead> 和 <tbody> 必须写全——屏幕阅读器靠它们识别数据范围，缺了会导致 NVDA 跳过全部列头；二是 <th> 必须带 scope="col"，否则辅助技术无法建立行列关联；三是 Outlook 邮件客户端（基于 Word 渲染引擎）完全不支持 table-layout: fixed，发报表邮件千万别用这套。
