直接用<table>是唯一兼顾语义、可访问性、打印和响应式的方案；第一列参数名用<th scope="row">，首行商品名用<th scope="col">，长参数需max-width+overflow+word-break控制，移动端用display:block+data-label模拟列名。
直接用 <table> 是唯一能兼顾语义、可访问性、打印和响应式的方案，别折腾 div 或 grid 模拟表格——结构一复杂，屏幕阅读器就报错，小屏一缩放，参数就对不上。
怎么写表头才能让参数和商品不串行
第一列必须是参数名，每个单元格用 <th scope="row">；首行是商品名，每个用 <th scope="col">。这两类 <th> 不能混用，也不能省略 scope 属性。
- 错误写法：
<th>iPhone 15</th>（没scope，读屏器不知道这是列标题） - 正确写法：
<th scope="col">iPhone 15</th>和<th scope="row">电池容量</th> - 如果某参数只适用于部分商品（如“5G 支持”对 4G 版不适用），填“-”或“不支持”，别留空，否则
colspan容易错位
长参数文本撑破表格怎么办
像“高通骁龙 8 Gen 3（4nm 工艺，主频 3.3GHz）”这种字段，默认会把整列拉宽，破坏横向对比。靠 white-space: nowrap 只会让它溢出容器，真正有效的组合是：
-
max-width: 200px（设单格宽度上限） -
overflow: hidden; text-overflow: ellipsis（配合white-space: normal才生效） -
word-break: break-word（确保中文和长英文单词可折行）
移动端怎么看清多列商品对比
别给 <table> 直接加 overflow-x: auto，它不会触发滚动；套一层 <div class="table-container"> 虽然能滑，但用户得反复拖拽，关键参数常被切掉。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：在
@media (max-width: 768px)下，把每行<tr>设为display: block，再用td::before { content: attr(data-label); }补上原列名 - 必须给每个
<td>加data-label属性，例如<td data-label="处理器">A17 Pro</td> - 别用
transform或position: absolute移动单元格——焦点顺序和读屏顺序会彻底错乱
最易被忽略的点：所有商品数据行必须严格对齐列数，<tbody> 里每一行的 <td> 数量，必须等于 <thead> 中 <th scope="col"> 的数量。少一个或多一个，小屏重排时就会漏项或错位，而且这种错误在桌面端根本看不出来。
