价格表必须使用语义化 <table> 结构，含 <thead><tbody>、scope="col"/"row"，价格单元格加 class="price" 并用 tabular-nums 对齐，外层容器设 overflow-x: auto 实现移动端滚动。
价格表必须用 <table>，别用 <div> 模拟
浏览器和屏幕阅读器靠 <table> 的原生语义识别“哪列是价格”“哪行是企业版”，<div> 布局只是视觉像，DOM 里全是扁平盒子。打印时容易跨页断行，导出 Excel 会全塞进 A1 单元格，读屏软件听到的是“容器、容器”，不是“专业版，月费 ¥199.00”。
常见翻车点：
-
<table><tr><th>基础版</th></tr><tr><td>✓</td></tr></table>—— 缺<thead>/<tbody>，辅助技术无法区分表头与数据 - 用
display: grid或float强行对齐价格列 —— 列宽失控，缩放后文字换行错位
<thead> 和 <tbody> 必须手写，scope="col" 不能省
浏览器会自动补全 <tbody>，但 JS 获取 document.querySelector('tbody').rows.length 时，没写就会报 Cannot read property 'length' of null；CSS 选中 tbody tr.price-row 也失效。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<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 class="price"><strong>¥99.00</strong></td>
<td class="price"><strong>¥199.00</strong></td>
<td class="price"><strong>¥399.00</strong></td>
</tr>
</tbody>
</table>关键点：
- 首行必须包在
<thead>里，每列<th>都要带scope="col" - 功能项或价格项所在行，用
<th scope="row">标明含义（如“月费”“存储空间”） - 价格单元格统一加
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>堆砌对齐 —— 响应式断行后彻底乱套 - 价格数字必须包裹
<strong>或单独标签，方便统一加色、划线、切换币种
移动端不横向滚动的容器写法
直接给 <table> 加 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> 漏写、价格没包裹 <strong>，这些看似细小的点，在导出 Excel、读屏访问、打印分页时会集中爆发。
