结论：手机端表格不应横铺，优先用卡片堆叠或水平滚动；table-layout: fixed需配套width: 100%、父容器约束及规避Outlook限制；列≥4时推荐data-label转卡片；滚动方案须配视觉提示与viewport meta。
直接说结论：别硬撑，表格在手机上本就不该横着铺开；优先用卡片堆叠或水平滚动，table-layout: fixed只是补救手段，不是银弹。
为什么table-layout: fixed常失效
很多人加了table-layout: fixed还溢出，根本不是属性没生效，而是漏了三个强制配套项：
-
width: 100%必须写在table上，只写在父容器里不触发fixed逻辑 <th>或<code><col>必须带明确宽度（如width="25%"或style="width: 25%"），空着就按内容撑开- 如果用了
flex或grid做父容器，width: 100%可能被忽略，得给父容器加max-width: 100vw或display: block - 给每个
<td>加<code>data-label，比如<td data-label="下单时间">2026-04-24 10:30</td> - 用
@media (max-width: 768px)隐藏<thead>，把<code><tr>设为<code>display: block，<td>设为<code>display: block+position: relative - 用
::before { content: attr(data-label) }把表头语义塞进每个单元格前面 - 避免用
float或inline-block——窄屏下换行错位高发 - 外层容器必须设
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS滑动惯性） <table>要设<code>min-width: fit-content（或具体值如min-width: 1200px），否则内容会压缩变形- 禁用
white-space: nowrap在<td>上——长URL或无空格文本会直接撑爆容器 <li>加视觉提示：滚动条样式优化（<code>scrollbar-width/::-webkit-scrollbar），或顶部固定阴影渐变暗示可滑动
另外，Outlook（用Word引擎渲染）完全不支持table-layout: fixed，发邮件时慎用。
列数≥4时，用data-label转卡片更可靠
横向挤成一条缝不如垂直读清楚。关键不是“怎么让表格变小”，而是“怎么让每条数据自成一卡”：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
这种方案兼容性好（IE9+），且语义保留完整，屏幕阅读器也能正常读出字段名。
报表类表格只能滚动？那得加体验细节
后台数据列表、财务明细这类不能删列的场景，水平滚动是务实选择，但光加overflow-x: auto远远不够：
别指望用户自己发现能左右滑，移动端没有鼠标悬停，没提示=不可见。
容易被忽略的底层前提
所有这些方案都依赖一个最基础却常被跳过的点：<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且写对。漏掉它，max-width: 768px媒体查询根本不会触发，100vw也按桌面视口算。真机调试时如果发现响应式断点不生效，先查这行meta——八成是它的问题。
