必须用，因其天然表达参数与商品的二维关系，保障语义正确、屏幕阅读器可读、打印可靠及响应式可控；和在真实项目中均存在导航错乱、对齐失效或错位等缺陷。
直接用 <table>，别绕弯——这是唯一能同时满足语义正确、屏幕阅读器可读、打印可靠、响应式可控的方案。其他方式在真实项目里都会在某个环节翻车。
<h3>为什么必须用 <code><table> 而不是 <code><div> 或 <code><dl></dl>
参数对比本质是二维关系：行是参数项（如“处理器”“电池容量”），列是商品（如“iPhone 15”“Pixel 8”）。<table> 天然表达这种结构；<code><div> 布局强行模拟表格，会导致：
<ul>
<li>键盘 Tab 导航顺序错乱，读屏器把“iPhone 15 的内存”和“Pixel 8 的摄像头”连着读，中间跳过所有参数名</li>
<li>小屏下无法统一控制列宽，某列撑开后整行变形</li>
<li>导出 PDF 或打印时列错位，甚至内容被截断</li>
<li>
<code><dl></dl> 无法横向对齐同一参数项，用户得左右扫视才能比对
<th> 和 <code><td> 怎么分才不混淆
<p>判断标准只有一条：它是否在定义“这一行/列代表什么”。不是数据内容，就不用 <code><td>。
<ul><li>首列参数名（如“网络制式”“快充功率”）必须用 <code><th scope="row"> —— 它定义了整行语义
<li>首行商品名（如“Mate 60 Pro”“S24 Ultra”）必须用 <code><th scope="col"> —— 它定义了整列语义
<li>中间所有交叉值（如“5G SA/NSA”“45W”）一律用 <code><td>，哪怕内容是图标或链接
<li>不要把“支持/不支持”这类状态写成 <code><th>，它是数据，不是表头
<h3>CSS 怎么让长参数文本不撑破表格又保持可读</h3>
<p>中文参数常含长字符串（如“联发科天玑 9300+（台积电 N4P 工艺，CPU 4×Cortex-X4 + 4×Cortex-A720）”），默认渲染会破坏对齐。靠 <code>white-space: nowrap 或单纯设 width 都不行。
- 必须组合三行：
max-width: 180px 控制单格宽度上限
-
word-break: break-word 确保中英文长词都能折行（不是整个词挤末尾）
-
text-overflow: ellipsis 配合 white-space: normal 才生效，否则不显示省略号
- 避免用
overflow: hidden 单独处理——会切掉重要内容，尤其带单位的数值（如“120Hz 刷新率”）
移动端怎么避免横向滚动还让用户看清对比
max-width: 180px 控制单格宽度上限word-break: break-word 确保中英文长词都能折行（不是整个词挤末尾）text-overflow: ellipsis 配合 white-space: normal 才生效，否则不显示省略号overflow: hidden 单独处理——会切掉重要内容，尤其带单位的数值（如“120Hz 刷新率”）硬加 overflow-x: auto 是最偷懒也最伤体验的做法：手指拖动易误触缩放，焦点导航失效，关键信息常被切在边缘。
- 真正可用的是媒体查询重构布局：小屏下把每行
<tr> 变成独立区块，用 <code>display: block - 给每个
<td> 加 <code>data-label属性（如data-label="快充功率"），再用::before { content: attr(data-label); }补列名 - 不依赖
transform或position: absolute移动单元格——这会让读屏顺序和视觉顺序不一致 - 测试 VoiceOver/TalkBack：朗读顺序应为“快充功率 → Mate 60 Pro: 88W → S24 Ultra: 45W”，而非先读完所有商品再读所有参数
最容易被忽略的是 scope 属性缺失和 data-label 没同步更新——这两处一错，表格在无障碍场景下就等于没做。
