必须用实现对比清单，因其天然支持行列语义，配合和确保读屏器准确解析，再通过table-layout、word-break及响应式重排保障多端可用性。
对比清单必须用 <table>，别用 <code><div> 模拟
<p>用 <code><div> 做对比清单，屏幕阅读器读出来就是“基础版 ✔️ 旗舰版 ❌ 多语言支持 ✅”，完全分不清哪项功能对应哪个产品。而 <code><table> 天然携带行列关系，读屏器能准确说出“‘多语言支持’列，‘旗舰版’行：✅”。这不是“看起来像不像”的问题，是语义是否被正确解析的底线。
<p>常见错误是把整个对比表包在 <code><div class="comparison"> 里，再用浮动或 Flex 排两列——结构上它只是一串文字，不是表格。只要内容存在明确的“功能项 × 产品名”交叉关系，就必须用 <code><table>。
<h3><code><th scope="col"> 和 <code><th scope="row"> 到底怎么配
<p>首行功能项（如“单点登录”“API 限频”）必须用 <code><th scope="col">；首列产品名（如“基础版”“专业版”）必须用 <code><th scope="row">；中间所有支持状态（✔️/❌/⚠️/文字说明）一律用 <code><td>。
<ul>
<li>错例：<code><th>API 限频</th> —— 它不是列标题，只是数据项，应为 <td>API 限频</td>
<td>旗舰版</td> 放在第一列 —— 应为 <th scope="row">旗舰版</th>
<th> —— 它是数据，不是行或列定义，用 <code><td>
<h3>两列布局下如何控制宽度与响应式</h3>
<p>纯两列对比表（功能项一列、各产品状态一列）容易在小屏上横向溢出。直接加 <code>overflow-x: auto 到 <table> 无效，得套一层容器；但更优解是结构重排。
<ul><li>给 <code><table> 加 <code>table-layout: fixed + width: 100%，防止内容撑破容器
<td> 和 <code><th> 加 <code>word-break: break-word，避免长文本拉宽整列
max-width: 768px）用 @media 把每行 <tr> 设为 <code>display: block，再配合 <td data-label="多语言支持">✅</td> 补列名
colspan 合并功能描述单元格 —— 小屏重排时会崩，改用单独一行写说明更稳两列 TD 布局最容易忽略的兼容性细节
两列结构看似简单，但老浏览器（IE11 及更早）和部分邮件客户端对 scope 属性支持不全，且 <thead> 必须存在——哪怕只有一行表头，也不能省略。
<ul><li><code><thead> 必须包裹首行，不能用 <code><tbody> 或 <code><div> 替代
<li>空单元格必须写成 <code><td></td> 或 <td> </td>，不能只换行缩进，否则 IE 渲染错位
border-collapse: collapse 要显式声明，否则默认有双线缝隙，视觉割裂感强max-width: 100% + height: auto，否则破坏列宽约束真正难的不是写出两列，而是让这两列在读屏器里可导航、在手机上可阅读、在旧系统里不崩坏——这些细节没处理好，对比清单就只是个好看但不可靠的装饰品。
