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