语义化表格结构是价格对比表可访问、响应式与维护性的前提：必须包含，用scope="col"/"row"明确行列关系，通过nth-child()按列控制样式，配合.table-container实现移动端滚动，并添加aria-label增强无障碍支持。
直接用 <table> 就能做出清晰、可访问、响应式的价格对比表，不需要 JS 框架或 CSS Grid 模拟——关键在结构语义和列级控制，不是视觉堆砌。
<h3>必须写全 <code><thead> 和 <code><tbody>，<code>scope="col" 不能省
只写 <table>
<tr>
<th>基础版</th>
<th>专业版</th>
</tr>
<tr>
<td>¥99</td>
<td>¥199</td>
</tr>
</table> 是无效语义：屏幕阅读器无法识别哪一列对应哪个套餐，打印时可能跨页断开，Excel 导出也成一团。
<thead> 只放一行 <code><tr>，每个套餐名用 <code><th scope="col">，例如 <code><th scope="col">专业版</th><tbody> 里每行一个功能项，价格填在对应列的 <code><td> 中 <li>第一列参数名（如“月费”“用户数”）用 <code><th scope="row">，确保辅助技术读作“月费，专业版：¥199”而非“第1行第2列：¥199” <li>避免 <code>colspan或rowspan，除非真有多级表头；它们会破坏nth-child()的列序计算- 推荐写法：
td:nth-child(2), td:nth-child(3) { text-align: right; font-weight: bold; background-color: #f0f8ff; } - 若某列标“推荐”，给对应
<th> 加 <code>data-popular="true"，再用th[data-popular="true"] ~ td:nth-child(3)联动样式，避免硬编码列号 - 价格数字建议单独包
<strong></strong>，如<td> <strong>¥199</strong>/月</td>，方便后续加色、字体或 JS 处理 - 必须套一层块级容器：
<div class="table-container"><table>...</table></div> - CSS 写死：
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-container table { min-width: 600px; } - 长文本（如“含 24 小时人工客服 + SLA 99.9%”）要截断，靠这三行组合：
max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word;——漏掉white-space: normal，ellipsis就不生效 - 别用
display: block强改<table>，会破坏列宽计算、<code>colgroup失效、打印错位推荐标识和价格对齐不能依赖空格或 JS，得靠 CSS 和结构
用空格把 “¥199.00” 右对齐，换字体就乱；用 JS 插入“推荐”标签，增加加载依赖且 SEO 不友好。原生方案更稳。
- 价格右对齐统一用
text-align: right，小数点对齐靠等宽字体 +font-feature-settings: "tnum"（支持现代浏览器） - “推荐”角标用
th[data-popular="true"]::before伪元素实现，内容、颜色、位置全可控，无需 JS 维护 - 如果必须兼容 Safari 15.4 以下或旧 Edge，改用
class="plan-popular"手动标记，别强求:has() - 所有
<td> 和 <code><th> 都加 <code>aria-label补充语义，例如<td aria-label="专业版是否包含自定义域名: 是">✓</td>，提升可访问性最易被忽略的是：结构语义一旦写错，后续所有 CSS 和无障碍支持都打折扣——
scope属性漏一个，屏幕阅读器就读不准；<thead> 和 <code><tbody> 混写，<code>nth-child()就失效；容器没包死，移动端横向滚动就卡死。这些不是“锦上添花”，而是表格能用的前提。
- 价格右对齐统一用
价格列高亮要用 nth-child() 定位，别给每个 <td> 加 class
<p>手动给每个价格单元格加 <code>class="price" 看似可控，但维护成本高、易漏、破坏列一致性。真正高效的做法是按列索引统一控制样式——前提是结构正确，否则 nth-child(2) 可能选到 <th> 或错位单元格。
<ul><li>价格列序号从整张表 DOM 顺序算起：<code><thead> 里的 <code><th> 也计入，比如首行有 <code><th>套餐</th>
<th>基础版</th>
<th>专业版</th>，那么价格列就是 td:nth-child(2) 和 td:nth-child(3)
移动端不靠 overflow-x: auto 强拖，要靠容器包裹 + min-width
直接给 <table> 加 <code>overflow-x: auto 无效——表格默认是 inline-level 元素，不会触发滚动。用户左右拖拽看全一行，等于没做响应式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
