用<table>做定价对比页最稳，因其语义正确、无障碍友好、打印与PDF导出表现佳，且兼容Safari 15以下；Flex/Grid易导致响应式错位、维护困难、长文本溢出等问题。
直接用 <table> 做定价对比页，不是“凑合”，而是最稳的选择——语义对、无障碍好、打印和导出 PDF 不错行，连 Safari 15 以下的老版本都能正常渲染。
为什么不用 Flex 或 Grid 布局做定价对比表
Flex 和 Grid 擅长一维或二维的容器级排版，但定价对比本质是「行列明确的结构化数据」：每列是一个方案（如“基础版”“专业版”），每行是一个属性（如“价格”“用户数”“支持邮箱”）。用 Flex 把每个方案当 <div> 横向排列，一旦加响应式、导出 PDF 或屏幕阅读器读取，就容易错位、漏读、无法横向对齐。
常见翻车点：
- 用
display: flex包裹多个<section>模拟列，结果小屏下换行后参数项完全失配（“基础版”的“存储空间”和“企业版”的“API 调用次数”对不上） - Grid 写
grid-template-areas硬编码区域名，改一个方案就得同步修所有区域定义，维护成本陡增 - 没设
min-width: 0+overflow: hidden，长文本（如“含 24 小时人工客服 + SLA 99.9%”）直接撑破整列
必须写的 HTML 结构要点
核心是让浏览器和辅助技术能准确识别“哪行是参数名、哪列是方案名”。不能全用 <td>，必须分层。
立即学习“前端免费学习笔记（深入）”；
- 第一行放在
<thead>里，每个方案名用<th scope="col">，比如<th scope="col">基础版</th> - 第一列每个参数名（如“月费”“并发数”“自定义域名”）用
<th scope="row">，确保屏幕阅读器读到“月费，基础版：¥99”而非“第一行第二列：¥99” - 所有数据单元格统一用
<td>，不混用<th> - 为方便后续加样式或 JS 控制，给每列加 class，比如
<th scope="col" class="plan-basic">基础版</th>
CSS 控制长文本和小屏体验的关键三行
定价页常含带括号说明、SLA 条款、功能列表等长字符串。只设 width 或 white-space: nowrap 都会破坏可读性。
真正起效的是这三行组合（作用于 td 和 th）：
td, th {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
}
注意：
-
text-overflow: ellipsis必须配合white-space: normal才能在多行内生效；设成nowrap只会在单行末尾截断，反而更难读 -
word-break: break-word是中文和英文单词折行的关键，break-all会把“Enterprise”硬切成 “Enterpri-se”，不推荐 - 小屏建议用
@media (max-width: 768px)切换为垂直卡片布局：隐藏<table>，用 JS 或纯 CSS 把每列转成独立<section class="plan-card">堆叠显示
容易被忽略的交互与可访问性细节
用户真正在比价时，注意力集中在差异项上。光有结构不够，还得帮人快速定位。
- 鼠标悬停某一行（如“API 调用次数”）时，整行高亮背景色，避免横向扫视错行
- 给关键字段（如价格、是否包含 SSL）加
font-weight: bold或微调字号，别依赖颜色——色弱用户可能看不出绿色对勾 - 禁用
border-collapse: collapse；改用border-spacing: 8px，留白比紧贴更易区分方案边界 - 如果某方案已下架，不要直接删掉该列，而是在对应所有
<td>里加aria-hidden="true"并用视觉样式标灰，保留结构完整性
表格列数一超过 5，人眼横向追踪就明显吃力。与其堆参数，不如拆成“核心功能对比”+“扩展服务包”两个表，或者用“展开详情”按钮收起次要项——结构清晰比信息堆砌更重要。
