电商规格参数对比表必须重排语义结构：参数名固定首列（），商品名置于首行（），数据单元格严格行列对齐；否则会导致无障碍阅读错乱、横向滚动变形、打印错位等问题。
直接说结论：电商规格参数对比表不能靠“删列”或“display: none”来切换对比维度，核心重构动作是重排语义结构——把参数名固定在第一列（<th scope="row">），商品名放在首行（<code><th scope="col">），所有数据单元格严格对齐行列坐标。否则 JS 动态切换、无障碍访问、打印导出都会出问题。
<h3>为什么不能用 display: none 隐藏商品列</h3>
<p>视觉上列没了，但 DOM 里还在，导致三个实际问题：</p>
<ul><li>屏幕阅读器仍会逐列读出隐藏列的 <code><td> 内容，用户听到“价格：¥2999 • 重量：245g • 重量：268g”，完全无法判断哪项对应哪款
<li>横向滚动时，隐藏列的 <code><th scope="col"> 仍参与宽度计算，容易让可见列被压缩变形
<li>打印预览中，<code>display: none 列虽不显示，但其 colspan 或 rowspan 会破坏表格网格连续性，造成错位或截断
怎么写才符合语义且支持多商品动态增减
关键不是“怎么隐藏”，而是“怎么组织原始结构”，让增减商品只需追加一列，不碰已有行逻辑：
- 第一行
<tr>：只放通用参数名，每个用 <code><th scope="row">，不设 <code>colspan - 第二行
<tr>：放商品名，每个用 <code><th scope="col">，显式写 <code>colspan="1"（Safari 对隐式 colspan 解析不稳定） - 后续所有
<tr>：每行对应一个参数，<code><td> 数量必须严格等于商品数，顺序一一对应 <li>多值参数（如颜色）统一用 <code><data value="red">红色</data> • <data value="blue">蓝色</data>，禁用<br>或<div> <h3>移动端横向滚动时表头怎么冻结不偏移</h3> <p>不是给整个 <code><table> 加 <code>overflow-x: auto就完事，要拆解控制：立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
overflow-x: auto，且禁止设width: 100%（会导致小屏列宽被强制压缩） <thead> 里所有 <code><th> 都要加 <code>position: sticky; top: 0; left: 0px;（注意是0px，iOS Safari 对0解析有 bug）- 首列（参数名列）额外加
left: 0px;并设background: #fff;，防止滚动时文字透底 <tbody><td> 要加 <code>padding-left: 1px，避免被 sticky 层遮住左边框重构后最易忽略的兼容点
结构看似简单，但有两个细节几乎必踩：
<th scope="row"> 缺失或写成 <code>scope="col"：屏幕阅读器无法将“电池容量”和它右边所有<td> 关联，视障用户只能听到孤立数值 <li>用 <code><div> 或 <code><p></p>套多值内容（如<td> <div>红</div> <div>蓝</div> </td>）：破坏表格流，复制粘贴时变成“红蓝”连写，SEO 抓取也识别为单字段重构不是重写 HTML，是校准语义锚点。参数名是不是
scope="row"，商品名是不是scope="col"，多值是不是用<data></data>包裹——这三个点对齐了，后续 JS 增删、CSS 响应、无障碍支持才能真正落地。
- 父容器必须设
