HTML表格重构的核心是语义正确+CSS降级+客户端分层处理；邮件等老旧环境仍需table骨架，因Grid/Flex在Outlook、Gmail等中不被支持或失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接说结论：HTML表格重构时，兼容性不是靠“加兼容写法”保下来的，而是靠结构语义正确 + CSS降级兜底 + 客户端能力分层处理。尤其在邮件、后台系统、老版IE残留环境里，<table> 仍是不可替代的骨架。
<h3>为什么现代CSS方案（Grid/Flex）在表格场景下容易翻车</h3>
<p>很多人一提“重构表格”，第一反应是用 <code>display: grid 替换 <table>。但实际落地会撞上硬限制：
<ul>
<li>Outlook 桌面版（Windows）用 Word 渲染器，完全不识别 <code>grid、flex，连 @media 都只支持极简子集
<style></style> 标签，所有响应式逻辑失效，除非全部内联<th scope="col"> 和 <code><thead> 的语义关联，纯 div 结构需手动补 <code>role="columnheader" 和 aria-labelledby，漏一项就影响可访问性
<thead> 和 <code><tfoot> 会在每页自动重复，div 模拟无法触发该行为
<h3>
<code>border-collapse 和 border-spacing 必须显式声明
不同浏览器对表格默认边框模型的理解差异极大。Chrome 默认 border-collapse: collapse，而 Safari 在某些 zoom 级别下会意外回退到 separate，导致单元格间多出 2px 空隙。不显式声明，就是把渲染权交给运气。
- 统一设为
border-collapse: collapse，再配border: 1px solid #ddd，比用cellspacing="0"更可靠 - 若需保留间隙（如斑马纹+边框分离），用
border-spacing: 0而非cellspacing，后者在 XHTML 或 strict DOCTYPE 下可能被忽略 - IE8 及更早版本不支持
border-spacing，必须用cellspacing="0"作为 fallback
移动端小屏适配不能只靠 overflow-x: auto
给 <table> 父容器加 <code>overflow-x: auto 是最常见做法，但它只是“能看”，不是“好用”：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 滚动惯性太强，手指一划容易滑过头，且无滚动指示器
- 横向滚动破坏阅读动线，用户常误以为数据已截断
- 键盘弹出时（如输入筛选条件），部分 Android 浏览器会重置滚动位置
更稳妥的做法是结合 data-label + 媒体查询：
<tr> <td data-label="姓名">张三</td> <td data-label="城市">北京</td> </tr>
CSS 中：
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
td:before {
content: attr(data-label) ": ";
font-weight: bold;
}
}
邮件模板里 <colgroup></colgroup> 是隐藏刚需
在 HTML 邮件开发中，<colgroup></colgroup> 几乎是唯一能跨客户端控制列宽的方式：
- Outlook 不解析
width在<td> 上的设置，但支持 <code><col width="120"> - Gmail 会忽略
max-width，但尊重<col>的固定宽度 - 避免用百分比（如
width="30%"），部分客户端会当字符串忽略；优先用像素值 - 配合
<colgroup></colgroup>使用table-layout: fixed，防止内容撑开列宽导致布局错乱
真正难的不是写对代码，而是记住哪些地方“不能动”——比如 <thead> 里必须有 <code><tr>，哪怕只放一个空 <code><th>；比如 <code>scope 属性一旦漏写，在 JAWS 屏幕阅读器里整行数据就失去上下文。这些细节不报错，但会让一部分人根本用不了你的表格。
