根本原因是未区分语义结构——thead应只放列头、tbody每行对应一款产品，否则nth-child()选错列、scope="col"失效、小屏堆叠；正确做法是列级控制样式、价格单独包裹strong、表格外层加overflow-x容器。
用 <table> 做价格对比表，为什么列对不齐？
<p>根本原因是没区分语义结构——<code><thead> 里写列头，<code><tbody> 里每行一个产品，否则 <code>nth-child() 选错列、scope="col" 失效、屏幕缩小时内容堆叠。常见错误是把所有功能点塞进一个 <td>，结果无法按列高亮价格或统一控制样式。
<p>正确做法：</p>
<ul><li><code><thead> 只放一行 <code><tr>，每个列头用 <code><th scope="col">
<li><code><tbody> 每个 <code><tr> 对应一款套餐，价格填在对应列的 <code><td> 里
<li>避免 <code>colspan 或 rowspan，破坏列索引连续性
<strong></strong> 或加 class，比如 <td class="price">
<strong>¥29</strong>/月</td>
让价格列真正“跳出来”的 CSS 写法
光加粗或变色不够，用户扫一眼要立刻识别出哪一列最划算。关键是列级控制，不是给每个单元格打补丁。
注意：td:nth-child(2) 的序号是从整张表 DOM 顺序数的，包括 <thead> 里的 <code><th>。比如首行 <code><th>套餐</th>
<th>基础版</th>
<th>专业版</th>，那么价格列就是 nth-child(2) 和 nth-child(3)。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
background-color: #f0f8ff;
font-weight: bold;
text-align: center;
padding: 12px 8px;
}
如果某列要标“推荐”，给对应 <th> 加 <code>class="recommended"，再用 th.recommended ~ td:nth-child(3) 联动样式，避免硬编码列号。
小屏下表格横向溢出怎么破？
直接给 <table> 加 <code>overflow-x: auto 没用——表格默认是 inline-level，不会触发滚动。必须包一层块级容器。
最简可靠方案：
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-container table {
min-width: 600px;
}
HTML 结构必须是：
<div class="table-container"> <table>...</table> </div>
别用 display: block 强改 <table>，会破坏表格渲染逻辑，导致列宽错乱、<code>colgroup 失效。
用卡片式布局替代表格时，DOM 结构怎么组织？
当放弃横向对比、改用垂直堆叠卡片（适合手机），关键不是“怎么写 CSS”，而是结构是否支持无障碍和 SEO：每张卡片必须是独立语义块，不能靠 JS 拼接生成。
结构要点：
- 外层用
<div class="pricing-grid">，不用 <code><table><li>每张卡片用 <code><article class="pricing-card"></article>，含<h3></h3>标题、<div class="price">、<code><ul class="features"></ul> - 价格数字仍用
<strong></strong>包裹，方便读屏器识别 - 不要用
float或inline-block排列卡片，用display: grid或flex
响应式断点建议设在 768px：小屏用单列卡片，大屏用三列网格。别在移动端还硬撑表格，那是自找兼容性麻烦。
