必须用实现功能对比表，因其语义明确、可访问性强；包列标题，标功能项，标产品名，其余用；小屏用css重排+data-label保障语义。
功能对比表不是“画个格子填内容”那么简单，核心是让不同产品的同一功能项能被快速横向识别，同时保证屏幕阅读器、搜索引擎和后续维护者都能准确理解“谁支持什么”。用 <table> 是唯一稳妥选择，其他方案在语义、可访问性或响应式上都会掉链子。
<h3>为什么必须用 <code><table> 而不是 <code><div> 布局
<p>浏览器和读屏器对 <code><table> 的解析逻辑是固化且一致的；<code><div> 模拟表格只会让结构变成“一串无关系的文字流”。尤其当用户靠键盘 Tab 导航或使用语音指令时，<code><div class="row"><div class="cell">✔️</div></div> 完全无法表达“这个对勾对应的是‘多语言支持’这一列、‘企业版’这一行”。
<thead> 必须存在，且只包第一行（列标题），不能漏掉或用 <code><div> 替代 <li>列标题用 <code><th scope="col">，比如 <code><th scope="col">单点登录</th>；产品名（如“基础版”“旗舰版”）用<th scope="row"> <li>所有功能支持状态（✔️/❌/⚠️/文字说明）一律用 <code><td>，别为了“看起来像标题”乱用 <code><th> <h3><code><th> 和 <code><td> 到底怎么分才不翻车 <p>关键看它在表格逻辑里“起不起定义作用”：如果这个单元格是用来告诉别人“这一列叫什么”或“这一行代表哪个产品”，就用 <code><th> 并加 <code>scope；否则全是<td>。常见错误是把“API 限频”“自定义域名”这些功能项写成 <code><th> —— 它们只是数据内容，不是表头。 <ul><li>首列产品名：<code><th scope="row">专业版</th>（不是<td>） <li>首行功能项：<code><th scope="col">SSO 集成</th>（不是<td>） <li>中间交叉格子：<code><td>✅ 支持 SAML2.0</td>（哪怕内容带图标或链接）- 序号列（1, 2, 3…）或“操作”列（如“试用”按钮）都是数据，用
<td> <h3>移动端窄屏下表格怎么不靠 <code>overflow-x: auto硬拖直接给
<table> 加 <code>overflow-x: auto是无效的，因为表格本身不会触发滚动；套一层<div class="table-container"> 虽能滑动，但用户得反复缩放+拖拽，关键信息常被切掉。真正可用的方案是 CSS 主导的结构重排。 <ul><li>小屏（<code>max-width: 768px）下，用@media把每行<tr> 设为 <code>display: block，再用td::before { content: attr(data-label); }补列名 - 给每个
<td> 加 <code>data-label="多语言支持"属性，这样即使结构变卡片，语义仍保留 - 避免用
rowspan/colspan合并功能描述格——跨行合并会让小屏重排逻辑崩坏，改用单独一行写“功能说明”更可控 - 别把状态和说明塞进同一个
<td>，比如 <code><td>❌（需联系销售）</td>；拆成两列：“支持状态” + “备注” - 统一用符号 + 简短文字：✅ 支持、⚠️ 有限支持、❌ 不支持、➖ 未提供，避免纯图标（无障碍不友好）
- 如有例外规则（如“仅限企业版 API 可调用”），放在“备注”列，不用
title属性藏起来——屏幕阅读器默认不读title
功能状态怎么标才不误导用户
一个 ❌ 不代表“完全不支持”，可能只是“需额外付费开通”；一个 ✔️ 也不代表“开箱即用”，可能依赖特定配置。HTML 表格不校验业务含义，但结构要为精确表达留出空间。
最易被忽略的一点：功能项顺序不是随便排的。把用户最关心、最常比较的核心功能（如权限管理、审计日志、SLA 保障）放在前面几列，次要功能（如界面主题色、邮件模板）往后放。这不光影响阅读效率，也直接影响 JS 动态筛选或后端导出时的数据优先级。
