必须使用而非模拟表格，因屏幕阅读器依赖其原生行列语义；和是唯一能明确传递交叉关系的机制；移动端应通过data-label+css重排实现响应式，避免overflow-x: auto或rowspan/colspan导致的结构错乱。
对比清单必须用 <table>，别用 <code><div> 模拟
<p>屏幕阅读器、搜索引擎和键盘导航依赖 <code><table> 的原生行列语义。用 <code><div class="row"><div class="cell"> 写出来的“表格”，对读屏软件来说只是连续段落，无法识别“第2行第1列对应的是‘企业版’的‘SSO 集成’支持状态”。<code><th scope="row"> 和 <code><th scope="col"> 是唯一能明确传递这种交叉关系的 HTML 原生机制。
<h3><code><thead> 里只放一行列标题，<code><th scope="col"> 必须包裹功能项
<p>常见错误是把所有 <code><th> 都塞进 <code><thead>，或者漏掉 <code>scope 属性。正确结构是：
<thead> 只包含一个 <code><tr>，且该行所有功能名称（如“单点登录”“API 限频”）必须用 <code><th scope="col">
<li>首列产品名（如“基础版”“专业版”）放在 <code><tbody> 的每个 <code><tr> 开头，用 <code><th scope="row">
<li>中间所有支持状态（✅/❌/⚠️/文字说明）一律用 <code><td>，哪怕带图标或链接
<h3>移动端小屏不靠 <code>overflow-x: auto 硬拖，靠 data-label + CSS 重排
<thead> 只包含一个 <code><tr>，且该行所有功能名称（如“单点登录”“API 限频”）必须用 <code><th scope="col">
<li>首列产品名（如“基础版”“专业版”）放在 <code><tbody> 的每个 <code><tr> 开头，用 <code><th scope="row">
<li>中间所有支持状态（✅/❌/⚠️/文字说明）一律用 <code><td>，哪怕带图标或链接
<h3>移动端小屏不靠 <code>overflow-x: auto 硬拖，靠 data-label + CSS 重排直接给 <table> 加 <code>overflow-x: auto 在多数浏览器中无效；套一层 <div class="table-container"> 虽能滚动，但用户需反复缩放+拖拽，关键信息常被切掉。真正可用的是结构重排：
<ul><li>在 <code><td> 上加 <code>data-label 属性，例如 <td data-label="多语言支持">✅ 支持 SAML2.0</td>
@media (max-width: 768px) { tr { display: block; } td::before { content: attr(data-label) ": "; font-weight: bold; } }
rowspan/colspan 合并功能描述格——跨行合并会让小屏重排逻辑崩坏
colspan 失效？先查三件事：computed width、列数总和、属性写法
colspan="2" 写了却没效果，大概率不是代码漏了，而是结构错位：
- 打开开发者工具，选中那个
<td colspan="2"> 元素，在「Computed」面板看 <code>width是否明显变宽；没变说明被后续单元格顶回去了 - 手动数当前
<tr> 中所有 <code><td> 和 <code><th> 的 <code>colspan值之和（未声明即为 1），确认是否等于你设计的总列数 - 检查属性是否为纯整数字符串：
colspan="2"✅，colspan="2px"❌，colspan="two"❌，col-span="2"❌
跨列合并本身不难，难的是它暴露了表格整体列数逻辑是否自洽——一旦某行列数算错，整个对齐就垮了。
