现代价格表应使用 div + css grid/flex 布局而非 table，因其语义更准确、响应更灵活、高亮逻辑更易实现；推荐标识应通过 data-recommended 属性与 css 变量驱动，配合无障碍属性和动效增强可访问性；响应式分两档：768px 下双列，479px 下单列并支持详情展开。
价格表用 table 还是 div 布局？
现代价格表基本不用 table 元素——它语义上只适合二维数据对比（比如历史报价记录），而面向用户的「套餐对比」本质是独立模块的横向陈列，div + CSS Grid/Flex 更可控、更易响应、更方便高亮逻辑注入。table 强制行列对齐，反而会让「推荐标签」错位、「特色项」加粗等交互变得别扭。
实际开发中，常见错误是套用旧模板硬塞 table，结果为了绕过边框塌陷、单元格高度不一致等问题，堆砌大量 !important 和 hack 样式。
- 用
section包裹整体，每个价格卡片用article或div，语义清晰且利于无障碍访问 - 横向排列用
display: grid，列数通过grid-template-columns控制，比 Flex 更容易统一高度 - 避免给卡片设固定高度，改用
align-content: start配合内容自然撑开
高亮推荐标识该加在哪儿？
不是加在标题栏右上角飘带图，也不是用 border-left: 4px solid #ff6b35 粗暴强调——真正有效的高亮，是让视觉焦点自然落在「这个选项被选中」这件事上，同时不破坏信息层级。
推荐做法：把「推荐」状态作为卡片的顶层修饰，用 position: relative 卡片容器 + 绝对定位的 span 标签，文字内容为 推荐，背景色用品牌主色，字号略小但对比度足够（至少 4.5:1）。
- 绝对定位的
top: -12px、right: -12px是常用安全值，适配多数圆角卡片 - 务必加
aria-label="当前为推荐方案"，屏幕阅读器用户能明确感知优先级 - 不要仅靠颜色区分「推荐」，可叠加图标（如
★）或微动效（如轻微缩放）提升识别率
CSS 中如何让「推荐卡片」自动突出而不写死样式？
硬编码 .price-card.recommended { border: 2px solid #007bff; } 看似简单，但一旦运营要临时切换推荐项，就得改 HTML class，前端还得同步检查 JS 是否漏掉状态同步逻辑。
更可持续的做法：用属性选择器 + 自定义属性驱动样式。在 HTML 中给推荐卡片加上 data-recommended="true"，CSS 里用 [data-recommended="true"] 匹配，并通过 --highlight-color 变量控制所有高亮表现。
<div class="price-card" data-recommended="true" style="--highlight-color: #007bff;"> <h3>旗舰版</h3> <!-- ... --> </div>
- JS 切换推荐时只需修改
dataset.recommended和style.setProperty，样式层完全解耦 - 支持多主题：深色模式下只需重置
--highlight-color，无需额外媒体查询 - 避免用
:nth-child(2)这类位置伪类做推荐逻辑——结构一变就失效
移动端价格表折叠与展开的临界点怎么设？
不是所有设备宽度都适合并排三张卡片。实测发现，当视口宽度 时，三列卡片会挤压文字、按钮换行、价格数字折行，可读性断崖下降；而 <code> 时，连单张卡片的 padding 都开始吃空间。
推荐分两档响应：768px 下转为双列，480px 下强制单列，并在单列时激活「展开详情」按钮，隐藏非核心项（如「免费试用」、「技术支持等级」），点击后才展开完整列表。
- 用
@media (max-width: 767px)改grid-template-columns: repeat(2, 1fr) - 用
@media (max-width: 479px)改为grid-template-columns: 1fr并显示.price-card__toggle - 展开动画用
max-height+transition，避免height: auto无法过渡的问题
最常被忽略的是：展开后焦点没管理。用户点击「查看全部」后，键盘 Tab 应该落到新出现的第一项（比如「服务周期」），而不是跳回顶部导航——这需要手动调用 focus()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
