真正能解决移动端表格显示不全的只有三类动作：强制布局算法、视觉结构重构、滚动容器封装；table-layout: fixed 失效源于缺三个条件：table 显式 width、至少一列设宽、父容器非塌陷 flex/grid；邮件客户端不支持该属性；display: flex 重构是主流解法；水平滚动仅适用于列多不可删场景；viewport meta 标签是前提。
直接用 overflow-x: auto 包一层不是重构，是掩盖问题；真正能解决移动端表格显示不全的，只有三类动作：强制布局算法、视觉结构重构、或滚动容器封装——选哪一种，取决于你的使用场景和语义要求。
table-layout: fixed 失效时怎么救
它不是失效，是缺了三个硬性条件：
-
table元素必须显式写width: 100%，只给父容器设没用 - 至少一列要通过
<th style="width: 25%"> 或 <code><col width="200">指定宽度，空着就退化回auto模式 - 父容器不能是塌陷的
flex/grid容器，得加max-width: 100vw或display: block防继承失效 - Outlook 等邮件客户端完全无视这个属性，发 HTML 邮件时别用
- 桌面端保持
display: table，移动端用媒体查询覆盖为display: flex; flex-direction: column <tr> 设为 <code>display: flex; flex-direction: column，变成垂直卡片<td> 和 <code><th> 改为 <code>display: flex; justify-content: space-between，左侧用::before注入data-label，右侧放内容- 必须给每个
<td> 加 <code>data-label="姓名"这类属性，否则移动端无法知道字段名 - 别用
orientation: portrait做断点判断——折叠屏展开后仍是portrait，但宽度已超 800px，会误触发移动样式 - 后台报表、财务明细这类列多且不可删字段的场景，滚动反而是最稳的
- 外层容器加
overflow-x: auto; -webkit-overflow-scrolling: touch（iOS 惯性滚动） -
table设min-width: fit-content或具体值（如min-width: 1200px），防文字被压扁 - 禁用
white-space: nowrap在<td> 上，否则 Base64、长 URL 会直接撑爆容器 <li>纯 CSS 很难统一滚动条样式，更实际的做法是在容器底部加提示文字：<code><small>← 可左右滑动 →</small>
用 display: flex 重构表格视觉结构
这是目前兼容性好、可访问性强、代码清晰的主流解法。不改 HTML，只靠 CSS 切换布局行为：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
水平滚动容器要不要用
它不是妥协，是务实选择，但只适用于特定场景：
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：<meta name="viewport" content="width=device-width, initial-scale=1"> 必须存在且放在 最前。没这句，再细的 CSS 也白搭——它不是锦上添花，是响应式表格能跑起来的前提。
