正确做法是用外层块级容器包裹表格并设overflow-x: auto，必须加-webkit-overflow-scrolling: touch确保iOS流畅滚动，禁用white-space: nowrap防长文本撑破，配合table-layout: fixed与显式列宽控制渲染。
直接套一层 .table-responsive 容器 + 几行 CSS 就能跑起来，不用框架、不写 JS、不依赖媒体查询也能在手机上横向滚动查看完整表格。关键不是“怎么设模板”，而是“别让表格自己撑破屏幕”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用容器包裹并启用 overflow-x: auto
原生 <table> 没有响应式能力，强行给它加 <code>width: 100% 或 max-width 基本无效——内容一长就溢出，尤其遇到长 URL、未换行文本或图片时。正确做法是用外层块级容器接管宽度控制：
-
.table-responsive必须设display: block（默认就是），否则overflow-x不生效 - 必须加
-webkit-overflow-scrolling: touch，否则 iOS 上滚动卡顿、没惯性 <table> 自身不要设 <code>width: 100%，否则会填满容器、失去滚动前提- 推荐加
min-width: fit-content或具体值（如min-width: 800px），防止小屏下被压缩变形 - 必须同时设
width: 100%，否则table-layout: fixed不生效 - 至少一列要有明确宽度，例如
<th style="width: 25%">姓名</th>或<col width="120"> - 没设满所有列宽时，剩余空间由未设宽列平分，容易失衡，建议每列都带比例或像素宽
- Outlook（用 Word 渲染引擎）完全不支持该属性，发邮件场景慎用
- 用
::before { content: attr(data-label) }把标签插入每项前 - 禁用
white-space: nowrap，否则无空格长文本（如 Base64、URL）会直接撑爆容器 -
<col>不参与渲染，display: none对它无效，浏览器也不保证样式继承行为一致 -
visibility: hidden保留布局空间，会导致列宽残留、对齐错乱，看起来像“空了一列” - 隐藏整列时，
<thead> 和 <code><tbody> 必须同步处理，否则表头悬空 <li>用 <code>.hidden-column { display: none; }类替代内联style.display，避免覆盖原始display: table-cell
table-layout: fixed 控制列宽不崩塌
默认 table-layout: auto 会等所有内容加载完才算列宽，小屏下极易撑破容器。改成 fixed 后，列宽只认第一行 <th> 或 <code><col> 的显式宽度，渲染快且可控：
用 data-label 实现卡片堆叠，而非隐藏列
靠 @media 隐藏 <th> 或 <code><td> 极易导致表头与数据列数不一致，浏览器自动补空列或错位渲染——这不是 bug，是表格模型决定的。更可靠的是语义化堆叠：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>每个 <code><td> 加 <code>data-label="邮箱"，对应 <th> 内容
<li>媒体查询中把 <code><tr> 设为 <code>display: block，<td> 设为 <code>display: block; position: relative
别碰 <col> 和 visibility: hidden
这两类写法看着省事，实际埋坑最深：
真正难的不是写几行 CSS，而是想清楚：这表格在手机上到底该“滚动”还是“堆叠”？滚动适合字段多、不可删减的后台报表；堆叠适合字段语义强、用户需逐条理解的业务表单。选错方案，后面所有优化都是徒劳。
