HTML报表必须保留语义，因财务等二维数据依赖其DOM结构实现可访问性、Excel导出和SEO；删表改Flex/Grid会破坏屏幕阅读器识别、ARIA校验及行列映射；响应式与样式问题根源在于结构松散、标签误用或CSS硬编码，而非标签本身。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
HTML报表页面的表格重构，不是把<table>换成<code><div>就完事——真实报表必须保留<code><table>语义，但绝大多数样式、响应式和可访问性问题，都出在结构松散、标签误用或CSS硬编码上。<h3>为什么不能直接删掉<code><table>改用Flex/Grid<p>报表数据（如财务明细、订单列表、指标对比）本质是二维关系型结构，屏幕阅读器、Excel导出、打印样式、SEO爬虫都依赖原生<code><table>的DOM语义。用<code>div + role="table"模拟，ARIA再全也过不了WCAG 2.1的aria-owns校验，NVDA和JAWS会跳过表头关联，用户根本不知道当前单元格属于哪一列。
- 真实报表场景下，
<thead>和<code><tbody>不是“可选”，而是屏幕阅读器识别数据范围的强制锚点；缺<code><thead>，首行会被当普通数据读<li> <code><caption></caption>必须紧贴<table>开头，且文本要能被<code>aria-labelledby引用；写成<h2>销售报表</h2> <table>…</table>，等于没写 - 跨行列合并（
rowspan/colspan）若用于视觉分组而非真实数据关系（比如“Q3汇总”横跨4列），会破坏辅助技术的行列映射，应改用嵌套<section></section>+ 独立<table> <h3> <code>table-layout: fixed总不生效的三个硬条件设了
table-layout: fixed却还是被长文本撑破容器？不是CSS写错了，是漏了任一前提：<table>必须显式声明<code>width: 100%（或具体像素值），不能是width: auto或未设置- 至少一列需通过
<col>、第一行<th>的<code>width属性或内联样式指定宽度，例如<th style="width: 20%">状态</th> <td>上禁用<code>white-space: nowrap——它会阻止换行，导致内容溢出而非压缩；应改用word-break: break-all或overflow-wrap: break-word特别注意：Outlook等基于Word渲染引擎的邮件客户端完全不支持
table-layout: fixed，报表若需发邮件，得单独提供兼容方案。立即学习“前端免费学习笔记（深入）”；
窄屏下堆叠显示时
data-label绑定失效的根本原因响应式堆叠后屏幕阅读器读不出字段名，不是JS没跑，而是
data-label值与原始<th>文本不严格一致：<ul><li> <code>data-label值必须和对应<th>的<code>textContent**逐字匹配**：大小写、空格、中文标点（如全角冒号 vs 半角）都不能差<thead>设<code>display: none后，必须同步加aria-hidden="true"，否则屏幕阅读器仍会尝试读取隐藏内容并报错<td>要加<code>position: relative，再用::before { content: attr(data-label) ": " }插入标签；靠JS动态注入或额外DOM节点，会导致焦点顺序错乱- 每条
<tr>设<code>display: block，每个<td>设<code>display: block+margin-bottom: 8px，否则堆叠后行与行粘连难区分列数超6列时强行撑
<table>不如切Grid<p>当报表列数达7列以上（如多维度运营看板），原生<code><table>在宽屏下无法重排顺序、窄屏下无法动态折叠非关键列，DOM结构就卡死了：<ul><li>用<code><div class="row">替代<code><tr>，<code><div class="cell">替代<code><td>，并加<code>role="cell"和aria-label补全语义 - 宽屏用
display: grid; grid-template-columns: repeat(5, 1fr)，窄屏切为grid-auto-flow: row+grid-template-rows: auto - 需要横跨整行的标题或操作栏，用
grid-column: 1 / -1，别用colspan - 注意：
Grid方案无法被Excel直接识别为表格，导出CSV或打印需额外处理aria-hidden和备用DOM结构
真正难的不是语法转换，而是让每一列的宽度策略经得起不同数据长度的考验——比如“操作”列固定
80px，“描述”列用calc(100% - 240px)留白，这种计算必须在<th>上生效，而非父容器。</th>
