正确做法是用外层块级容器包裹表格并设overflow-x: auto，必须加-webkit-overflow-scrolling: touch确保iOS流畅滚动，禁用white-space: nowrap防长文本撑破，配合table-layout: fixed与显式列宽控制渲染。

直接套一层 .table-responsive 容器 + 几行 CSS 就能跑起来，不用框架、不写 JS、不依赖媒体查询也能在手机上横向滚动查看完整表格。关键不是“怎么设模板”，而是“别让表格自己撑破屏幕”。

用容器包裹并启用 overflow-x: auto

原生

没有响应式能力，强行给它加 width: 100% 或 max-width 基本无效——内容一长就溢出，尤其遇到长 URL、未换行文本或图片时。正确做法是用外层块级容器接管宽度控制：

• .table-responsive 必须设 display: block（默认就是），否则 overflow-x 不生效
• 必须加 -webkit-overflow-scrolling: touch，否则 iOS 上滚动卡顿、没惯性

自身不要设 width: 100%，否则会填满容器、失去滚动前提

推荐加 min-width: fit-content 或具体值（如 min-width: 800px），防止小屏下被压缩变形

table-layout: fixed 控制列宽不崩塌

默认 table-layout: auto 会等所有内容加载完才算列宽，小屏下极易撑破容器。改成 fixed 后，列宽只认第一行

的显式宽度，渲染快且可控：

• 必须同时设 width: 100%，否则 table-layout: fixed 不生效
• 至少一列要有明确宽度，例如

或

没设满所有列宽时，剩余空间由未设宽列平分，容易失衡，建议每列都带比例或像素宽

Outlook（用 Word 渲染引擎）完全不支持该属性，发邮件场景慎用

用 data-label 实现卡片堆叠，而非隐藏列

靠 @media 隐藏

设为 display: block， 和 visibility: hidden

这两类写法看着省事，实际埋坑最深：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

不参与渲染，display: none 对它无效，浏览器也不保证样式继承行为一致

visibility: hidden 保留布局空间，会导致列宽残留、对齐错乱，看起来像“空了一列”

隐藏整列时，

和 必须同步处理，否则表头悬空

用 .hidden-column { display: none; } 类替代内联 style.display，避免覆盖原始 display: table-cell

真正难的不是写几行 CSS，而是想清楚：这表格在手机上到底该“滚动”还是“堆叠”？滚动适合字段多、不可删减的后台报表；堆叠适合字段语义强、用户需逐条理解的业务表单。选错方案，后面所有优化都是徒劳。

或
姓名
或	极易导致表头与数据列数不一致，浏览器自动补空列或错位渲染——这不是 bug，是表格模型决定的。更可靠的是语义化堆叠： 每个	加 data-label="邮箱"，对应	内容 媒体查询中把
设为 display: block; position: relative 用 ::before { content: attr(data-label) } 把标签插入每项前 禁用 white-space: nowrap，否则无空格长文本（如 Base64、URL）会直接撑爆容器 别碰

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！