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