根本原因是table-layout: auto导致列宽被长内容撑开，必须用外层div设overflow-x:auto、white-space:nowrap，table设display:block、min-width:max-content及table-layout:fixed，并显式定义列宽。
表格在小屏下内容重叠，根本不是“样式没加好”，而是浏览器还在用 table-layout: auto 算列宽——长 URL、未换行的 Base64、图片一加载，整列就被撑开，相邻单元格被迫挤压或溢出。直接设 width: 100% 反而让问题更隐蔽。
为什么加了 overflow-x: auto 还不滚动？
因为 <table> 默认是“内在尺寸优先”的替换元素，它会主动撑宽父容器，根本不会触发溢出。你看到的“没滚动条”，其实是表格压根没被限制住。
- 外层容器（比如
<div class="table-container">）必须设overflow-x: auto和white-space: nowrap（后者防内部换行干扰宽度计算） -
<table>必须加display: block，否则仍走表格渲染流，无视父容器约束 - 强烈建议加
min-width: max-content或具体值（如min-width: 1200px），否则内容缩窄后滚动条可能消失 - iOS Safari 要加
-webkit-overflow-scrolling: touch，否则拖拽卡顿甚至失灵
table-layout: fixed 为什么没生效？
这个属性常被当成“响应式开关”，但它只是强制列宽按设定分配——缺一个条件就退化回 auto。
-
<table>上必须显式写width: 100%（只写在父容器上无效） - 至少一列要有明确宽度来源：要么
<col width="25%">，要么<th style="width: 25%">；全空着就等于没设 - 如果父容器是 flex 或 grid，
width: 100%可能被忽略，得给父容器加max-width: 100vw或display: block - 千万别在
<td>上用white-space: nowrap，否则无空格长文本（如 JWT、URL）会直接撑爆容器
列数 ≥ 4 时，别硬撑横向滚动
用户记不住“第 5 列是啥”，滑来滑去反而降低信息获取效率。这时堆叠比滚动更可靠。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<td>加data-label属性：<td data-label="下单时间">2026-08-12 14:02</td> - 媒体查询里隐藏
<thead>，把<tr>设为display: block，<td>设为display: block; position: relative - 用
td::before { content: attr(data-label); }插入表头文字，别用float或inline-block，窄屏下极易错位 - 伪元素默认是 inline，若需对齐或控制换行，得加
display: inline-block或white-space: nowrap配合text-overflow: ellipsis
最容易被忽略的是滚动条的视觉提示——纯 CSS 很难统一各平台样式，更务实的做法是在容器底部加一行小字“← 可左右滑动 →”，或者用 JS 监听 scroll 动态显示箭头图标。另外，Outlook 完全不支持 table-layout: fixed，发邮件时千万别用这套方案。
