必须配合table-layout: fixed或改用css grid/flex布局，否则移动端表格会文字挤团或横向滚动失效；因其强制浏览器仅依据首行宽度声明计算列宽，需搭配width: 100%及明确列宽设置才生效。
直接给结论：别指望 width: 100% 自己搞定，必须配合 table-layout: fixed 或彻底放弃 <table> 改用 CSS Grid / Flex 布局——否则小屏上不是文字挤成一团，就是横向滚动条卡死，用户根本没法看。
<h3>为什么 <code>table-layout: fixed 是多数场景的起点
浏览器默认用 table-layout: auto，它会等所有内容（包括图片、长文本）加载完才算列宽。手机端一卡一卡，且某列被“订单号：2026070815429938888”这种字段撑开，整行就崩了。
-
table-layout: fixed强制浏览器只看第一行<th> 或 <code><col>的宽度声明，渲染快、可控 - 必须搭配
width: 100%，否则fixed不生效 - 必须给至少一个
<th> 或 <code><col>设明确宽度，比如<th style="width: 25%">姓名</th>，否则列宽分配不可预测 - IE8+ 支持，但 Outlook 邮件里完全不认这个属性，发邮件报表慎用
- 在
@media (max-width: 768px)里设tr { display: block; margin-bottom: 12px; }，td { display: block; position: relative; }，再用td::before { content: attr(data-label); font-weight: bold; } - 别用
float或inline-block模拟堆叠——窄屏下换行错位是常态，display: block才稳 - 用
<div class="table-responsive"><table>...</table></div>包裹，.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } - iOS Safari 在滚动容器里点
<input>容易失焦，加touch-action: manipulation能缓解 - Firefox/Edge 默认滚动条太细甚至不可见，补一句
scrollbar-width: thin或用::-webkit-scrollbar自定义 - 别嵌套两层
.table-responsive——手势冲突、滚动卡顿、父容器高度计算全乱
列少（≤3列）且字段语义强时，用堆叠布局代替横向拉伸
比如“用户信息表”含“姓名/电话/状态”，强行横排在手机上手指点不准、文字缩到看不清。这时把每行 <tr> 变成独立卡片更合理。
<ul><li>给每个 <code><td> 加 <code>data-label，如 <td data-label="状态">已激活</td>
列多（≥4列）且不能删减时，滚动容器比堆叠更实用
后台数据列表、财务明细这类表格，字段就是不能砍。与其让用户疯狂上下滑动找字段，不如允许水平滑动，关键是要滑得顺、看得清。
真正容易被忽略的点：没有“银弹”，只有场景匹配
你写死一个方案上线，很快会发现它在某个安卓机型上文字截断、在 iOS 某个版本里滚动迟滞、在 Outlook 邮件里直接变单列乱码。堆叠适合用户侧轻量表，滚动适合后台管理页，Grid 替代方案适合新项目——选哪个，取决于字段数量、是否允许删减、目标终端（App 内 WebView？邮件？微信内嵌？），而不是“哪个最潮”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
