用<table>写价格表最直接，语义清晰且原生支持响应式；需规范使用<thead><tbody>、scope属性，并通过CSS控制collapse、padding和min-width，配合overflow-x实现移动端横向滚动。
用 <table> 写价格表最直接
浏览器原生支持、语义清晰、手机上也能靠 CSS 控制横向滚动，不用额外 JS 库。别一上来就用 div 堆网格——那是自找麻烦。
关键点：<thead> 放标题行，<tbody> 放数据行，每列用 <th> 或 <td>，别漏掉 scope 属性（比如 <th scope="col">），这对屏幕阅读器和 SEO 都有实际影响。
示例结构：
<table>
<thead>
<tr>
<th scope="col">服务</th>
<th scope="col">基础版</th>
<th scope="col">专业版</th>
<th scope="col">旗舰版</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">存储空间</th>
<td>10 GB</td>
<td>50 GB</td>
<td>200 GB</td>
</tr>
<tr>
<th scope="row">月费</th>
<td>$9</td>
<td>$24</td>
<td>$49</td>
</tr>
</tbody>
</table>
CSS 控制价格表样式时优先处理三件事
纯 HTML 表格默认丑，但改起来不难。重点不是“怎么好看”，而是“怎么不崩”：
立即学习“前端免费学习笔记（深入）”；
- 给
table加border-collapse: collapse，否则边框双线难看又占空间 - 所有
th和td必须设padding，不然文字贴边，移动端尤其难受 - 用
min-width限制列宽（比如th:nth-child(2) { min-width: 120px; }），防止小屏下文字挤成一团或换行错位 - 如果某列要居中价格数字，用
text-align: center，别用<center>或空格硬对齐
响应式差的常见表现和解法
用户在手机上看价格表时最常遇到：横向滚动失效、文字被截断、按钮点不到——基本都出在没控制容器宽度或忘了 overflow-x。
实操建议：
- 把
<table>包进一个带overflow-x: auto的<div>，并设width: 100% - 给
table加white-space: nowrap防止文本意外换行破坏对齐 - 避免在
th/td里塞<button>或复杂组件；真要加 CTA，用纯<a>+ class 控制样式更稳 - 测试时手动缩窄浏览器窗口，别只信“响应式调试工具”的模拟结果
别在价格表里动 JavaScript 的念头
除非你明确需要动态切换套餐、实时计算总价、或对接支付接口，否则加 JS 就是增加失败点。
典型翻车场景：
- 用
document.querySelectorAll('td')批量改价格，结果 CMS 后台一更新表格结构，脚本就静默失效 - 为“高亮推荐项”加 class，却没考虑 SSR 或静态生成时 JS 还没执行，首屏渲染错乱
- 监听窗口 resize 重排列表，但没防抖，滚动时 CPU 占用飙升
静态价格表就该是静态的。内容变，改 HTML；样式变，调 CSS；逻辑变，再谈 JS。
真正容易被忽略的是：价格单位是否统一（$ / ¥ / €）、小数位是否对齐（$9.00 vs $9）、以及“免费”“联系销售”这类非数字项要不要加 aria-label 说明语义。这些细节比动画和渐变色重要得多。
