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