用<table>实现响应式价格表最合理，语义正确且可访问性佳；需正确设置scope属性、用CSS滚动容器适配小屏、纯CSS实现高亮与悬停，移动端优先横向滚动而非强行竖排。
直接用原生 HTML + CSS 就能做出响应式、可访问、语义清晰的会员价格表，根本不需要框架或 JS 渲染——关键是结构选对、样式写稳、交互做轻。
用 <table> 还是 <div> 布局？
价格表本质是「横向对比多个方案，纵向罗列相同属性」，属于典型二维数据关系。用 <table> 不仅语义正确，还能天然支持屏幕阅读器按行列读取，且在小屏上通过 CSS display: block + 滚动容器就能优雅降级。
- 别用
<div>模拟表格——会丢失scope、headers等可访问性属性，后期加键盘导航或读屏支持成本翻倍 - 避免把价格表塞进 Flex/Grid 容器再强行对齐——不同方案行数不一致时容易错位，维护困难
- 真要响应式折叠（比如手机端只显示当前选中方案），用
@media隐藏非关键列，而不是重写 DOM 结构
<th> 的 scope 属性怎么设才有效？
很多价格表看着整齐，但读屏软件一读就乱序，问题常出在 <th> 缺少正确的 scope。横向标题（如“基础版”“专业版”）必须加 scope="col"；纵向功能项（如“用户数”“存储空间”）必须加 scope="row"。
<thead>
<tr>
<th></th>
<th scope="col">基础版</th>
<th scope="col">专业版</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">用户数</th>
<td>5</td>
<td>20</td>
</tr>
</tbody>
- 第一列是功能描述，必须用
<th scope="row">，不能用<td>+ 加粗替代 - 表头单元格如果跨多列（如“全部包含以下功能”），要用
colspan+scope="col"，否则读屏会跳过该行 - 没设
scope的<th>在部分读屏工具里会被当成普通文本，无法关联对应数据单元格
CSS 控制价格高亮和悬停反馈的最小可行写法
突出推荐方案、悬停显示差异点，这些交互只需纯 CSS 实现，无需 JS 绑定事件或 class 切换。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案加
class="featured"，用border: 2px solid #3b82f6+position: relative往上微移 2px，视觉上“浮起”比其他列高一点 - 悬停效果直接写
tbody tr:hover td，背景色用rgba(59, 130, 246, 0.05)，避免纯色遮盖文字对比度 - 价格数字用
<span class="price">¥199</span>包裹，再用.price::before { content: "¥"; }分离符号与数值——方便后续用 CSS 控制货币符号大小/颜色 - 禁用
transition: all，只写transition: background-color 0.2s, transform 0.2s，否则边框、字体等意外动画会干扰焦点移动
移动端竖排时怎么保证功能项不被截断？
小屏下把表格转为单列布局，关键不是隐藏列，而是让每套方案自成区块，且功能项文字能完整显示。
- 用
@media (max-width: 768px) { table { display: block; overflow-x: auto; } }让表格可横向滚动，比强行折行更可靠 - 如果必须竖排，给
tbody tr加display: grid; grid-template-columns: 1fr 1fr;，左侧放功能名（<th scope="row">），右侧放各方案值，用grid-column: 1 / -1让标题横跨两列 - 所有
<td>和<th>内部加white-space: normal; word-break: break-word;，防长英文单词撑破容器 - 避免给
th设固定width或min-width，移动端宽度应由内容自然撑开
真正麻烦的不是写样式，而是测试不同屏幕尺寸下表头与数据的视觉对齐是否还成立，以及缩放 200% 后文字是否溢出——这些没法靠代码自动解决，得手动点开 DevTools 的设备模拟器逐个拉伸看。
