价格表必须使用语义化 结构，含 、scope="col"/"row"，价格单元格加 class="price" 并用 tabular-nums 对齐，外层容器设 overflow-x: auto 实现移动端滚动。
价格表必须用 <table>，别用 <code><div> 模拟<p>浏览器和屏幕阅读器靠 <code><table> 的原生语义识别“哪列是价格”“哪行是企业版”，<code><div> 布局只是视觉像，DOM 里全是扁平盒子。打印时容易跨页断行，导出 Excel 会全塞进 A1 单元格，读屏软件听到的是“容器、容器”，不是“专业版，月费 ¥199.00”。<p>常见翻车点：</p>
<ul><li>
<code><table>
<tr><th>基础版</th></tr>
<tr><td>✓</td></tr>
</table> —— 缺 <thead>/<code><tbody>，辅助技术无法区分表头与数据<li>用 <code>display: grid 或 float 强行对齐价格列 —— 列宽失控，缩放后文字换行错位
<thead> 和 <code><tbody> 必须手写，<code>scope="col" 不能省
<thead> 和 <code><tbody> 必须手写，<code>scope="col" 不能省浏览器会自动补全 <tbody>，但 JS 获取 <code>document.querySelector('tbody').rows.length 时，没写就会报 Cannot read property 'length' of null；CSS 选中 tbody tr.price-row 也失效。
正确结构示例：
| 套餐 | 基础版 | 专业版 | 企业版 |
|---|---|---|---|
| 月费 | ¥99.00 | ¥199.00 | ¥399.00 |
关键点：
- 首行必须包在
<thead> 里，每列 <code><th> 都要带 <code>scope="col" - 功能项或价格项所在行，用
<th scope="row"> 标明含义（如“月费”“存储空间”）<li>价格单元格统一加 <code>class="price"，方便后续 CSS 或 JS 定位
价格列右对齐 + 小数点对齐，靠 CSS 不靠空格
写 <td>¥ 99.00</td> 看似右对齐，实际换字体、缩放或复制粘贴到 Excel 时，空格会丢、变全角、数字错位。等宽字体 + tabular-nums 才可靠。
推荐样式写法：
.price {
text-align: right;
font-family: "Consolas", "SFMono-Regular", monospace;
font-variant-numeric: tabular-nums;
}
注意：
-
font-variant-numeric: tabular-nums在 Safari 14 及更早版本不支持，但价格可读性优先级高于小数点严格对齐 - 禁止在 HTML 中用全角空格、
<span></span>堆砌对齐 —— 响应式断行后彻底乱套 - 价格数字必须包裹
<strong></strong>或单独标签，方便统一加色、划线、切换币种
移动端不横向滚动的容器写法
直接给 <table> 加 <code>overflow-x: auto 没用，表格本身不会触发滚动；必须包一层块级容器，并设为可滚动。
HTML 结构：
<div class="table-container"> <table>...</table> </div>
CSS 写法：
.table-container {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 600px; /* 防止过窄压缩变形 */
table-layout: fixed; /* 列宽由 CSS 控制，不随内容撑开 */
}
补充说明：
- 别用
display: none隐藏整列来“适配手机”——键盘导航焦点丢失，SEO 降权，导出 Excel 失效 - 如果真要堆叠显示（如每款套餐竖排），用
data-label属性 + CSScontent: attr(data-label)实现，不破坏 DOM 结构 -
table-layout: fixed是关键，否则窄屏下某列内容过长会把整行拉宽，溢出不可控
价格表最易被忽略的其实是语义连续性：scope 缺失、<tbody> 漏写、价格没包裹 <code><strong></strong>，这些看似细小的点，在导出 Excel、读屏访问、打印分页时会集中爆发。
