必须用实现双栏对比，因其通过和建立行列语义关系，保障屏幕阅读器准确识别“A vs B”；flex/grid仅视觉对齐，无法传达交叉对比逻辑。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
双栏布局做左右对比，必须用 <table>，不是视觉排版问题，而是语义和可访问性刚性要求——屏幕阅读器靠 <code><th scope="col"> 和 <code><td> 的行列关系识别「A vs B」，<code>div 或 flex 再对齐也没用。
为什么不能用 display: flex 或 grid 做对比表
它们能做出两列外观，但无法表达「第2行左侧是‘免费版’的‘导出格式’，右侧是‘专业版’的同一项」这种交叉语义。读屏软件会把左右内容当成两个独立段落顺序朗读，用户根本不知道哪边对应哪边。Git diff 页面、VS Code 比较视图、CI 系统审查页全部用 <table>，不是习惯，是标准强制。
<ul><li><code><th scope="col"> 是唯一能让辅助技术建立列含义的 HTML 原生机制
<li>写 <code><div class="col-a">✅</div>
<div class="col-b">❌</div>，DOM 里没有行列结构，搜索引擎和键盘导航也抓不到对比关系
aria-label 或 role="grid"，实测中 VoiceOver、NVDA 仍按 DOM 流顺序读，不识别对比逻辑<table> 对比表最小合法结构
<p>必须包含表头行（<code><thead>），且每个列标题必须用 <code><th scope="col">；每行数据用 <code><tr> 包裹，每个单元格必须是 <code><td>（不能直接写在 <code><tr> 里）。
<ul><li>第一行只能是 <code><th scope="col">，比如 <code><th scope="col">基础版</th>
<th scope="col">专业版</th>
<tr> 开始，两个 <code><td> 一一对应，如 <code><td>最大项目数：3</td>
<td>无限制</td>
<tr>基础版</tr>——浏览器会忽略未包裹在 <td> 或 <code><th> 里的文本，渲染为空白
<li>空单元格写成 <code><td></td>，别留换行或空格，否则可能撑高整行<table>
<thead>
<tr>
<th scope="col">功能</th>
<th scope="col">基础版</th>
<th scope="col">专业版</th>
</tr>
</thead>
<tbody>
<tr>
<td>自定义域名</td>
<td>×</td>
<td>✓</td>
</tr>
</tbody>
</table>
移动端小屏怎么避免横向滚动
给 <table> 加 <code>overflow-x: auto 在多数浏览器中无效；套一层 <div class="table-container"> 虽能滚动，但用户需反复缩放+拖拽，关键信息常被切掉。真正可用的是结构重排。<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，例如 <td data-label="API 限频">100次/小时</td>
@media (max-width: 768px) { tr { display: block; } td::before { content: attr(data-label) ": "; font-weight: bold; } }
rowspan/colspan——跨行合并会让小屏重排逻辑崩坏，colspan="2" 一用，整行语义就断了display: block + ::before 显式注入标签容易被忽略的兼容细节
表格对比看似简单，但几个点一错，整个语义链就断了：一是 <th scope="col"> 的 <code>scope 属性漏写，读屏器就认不出这是列标题；二是 <thead> 里混进 <code><td>，或者把产品名（如“企业版”）塞进 <code><thead> 当标题；三是小屏重排时没处理 <code><th scope="row">，导致首列描述项在竖排后丢失上下文。</th>
