表格必须包含thead、tbody和带scope属性的th标签，用colgroup配合table-layout:fixed控制列宽，移动端采用横屏优先与列折叠策略，并添加caption确保无障碍访问。
table 基础结构必须包含 thead、tbody 和明确的 th 标签
直接写 table 但没分 thead/tbody，会导致屏幕阅读器识别错乱、CSS 样式难控制，尤其在参数列多时容易错行。参数对比图本质是「横向维度（产品）」和「纵向维度（参数项）」的交叉矩阵，th 必须准确标注行列归属。
正确做法：
-
thead中第一行用th写产品名称（横向表头），且加scope="col" - 每行参数项开头用
th写参数名（纵向表头），加scope="row" - 所有数据单元格统一用
td，不混用th
| 参数 | 产品A | 产品B |
|---|---|---|
| 尺寸 | 120×80mm | 130×85mm |
CSS 控制列宽与对齐时，优先用 colgroup 而非 width 属性
width 写在 td 或 th 上会被浏览器忽略或表现不稳定，尤其在响应式场景下容易撑破容器。参数对比图常需「首列固定宽度（参数名）、其余列等宽或按内容自适应」，靠 colgroup 才能可靠干预布局。
- 给首列（参数名）设固定宽：
<col style="width: 120px"> - 后续列用
<col style="width: auto">或百分比，避免硬编码像素值 - 配合
table-layout: fixed强制列宽生效，否则默认auto会按内容重算
漏掉 table-layout: fixed 是常见坑——明明写了 col 宽度，表格还是乱挤。
移动端适配不能只靠 overflow-x: auto
单纯给 table 外层加 overflow-x: auto，在 iOS Safari 上可能触发双指缩放失效，或滚动卡顿。参数对比图在手机上更合理的方案是「横屏优先 + 列折叠」。
- 用媒体查询限制最小宽度，例如
@media (max-width: 768px) { table { min-width: 600px; } } - 对非关键参数列（如「包装清单」「保修期」）加
class="hidden-on-mobile"，用 CSS 隐藏 - 绝不给
td设white-space: nowrap，否则长参数值（如型号编号）会直接撑爆视口
实际测试中，iOS 16+ 对 overflow-x: auto 的 table 支持仍不稳定，宁可少显一两列，别让整个表不可操作。
无障碍支持必须补全 caption 和 aria-label
参数对比图不是装饰性内容，屏幕阅读器需要知道「这是哪几款产品的什么参数对比」。仅靠视觉标题（h2）不够，caption 是语义必需。
-
caption放在table开头，文字要具体，比如「iPhone 15 vs Pixel 8：摄像头与电池参数对比」 - 若表格无可见标题，用
aria-label替代，但优先用caption - 避免用
role="table"手动模拟——原生table语义已足够，额外加 role 反而干扰读屏
很多团队以为加了 alt 就算完成无障碍，但 table 的语义链（caption → thead → scope）缺一不可，否则读屏会把参数名和数值读成无关联的碎片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
