电商参数对比表应以参数为行、产品为列，用固定参数项、填充数值，配合position:sticky冻结首行首列，并用分组替代colspan实现语义化分组。

表格结构必须用 <thead> 和 <code><tbody> 明确分离表头与参数行 <p>电商参数对比表的核心是「横向对比」，不是「纵向罗列」。如果把产品名放在第一列、参数名放在第一行，会导致每新增一个产品就要重写整行 HTML，维护成本爆炸。正确做法是：第一行用 <code><thead> 固定参数项（如“品牌”“屏幕尺寸”“电池容量”），每个产品占一列；后续所有参数值都按行填充，对应到各产品列下。 <p>常见错误是直接套用普通数据表格思维，把产品当行、参数当列，结果响应式撑开后错位严重，也难以用 CSS 精准控制列宽和冻结首列。</p> <ul><li><code><th> 必须只出现在 <code><thead> 和 <code><tbody> 的首行（即参数名行），产品名称用 <code><th scope="col"> 标明列主题 <li>参数值全部用 <code><td>，不要混用 <code><th>，否则语义混乱、屏幕阅读器误读 <li>给表格加 <code>role="grid" 和每行加 role="row" 可提升可访问性，尤其对键盘导航支持更稳

用 position: sticky 冻结首列（参数名）和首行（产品名）

长参数表左右滚动时，用户必须随时知道当前列对应哪个产品、当前行是什么参数。纯靠 JS 模拟冻结容易卡顿且兼容性差，现代方案优先用 CSS position: sticky。

关键约束：父容器必须有明确宽度（如 max-width: 100% 或固定像素），且设置 overflow-x: auto；sticky 元素的祖先不能有 transform 或 filter，否则失效。

• 参数名列（第一列 <td> 或 <code><th>）设 <code>position: sticky; left: 0; z-index: 2;
• 产品名行（<thead> 内所有 <code><th>）设 <code>position: sticky; top: 0; z-index: 1;
• 若需同时冻结左上角单元格（参数名+产品名交汇处），单独给 <thead><tr><th> 加 <code>left: 0; top: 0;，并确保其 z-index 最高

  移动端适配别硬塞横向滚动，优先用折叠展开 + 列切换

  小屏强行横向滚动表格，手指拖拽精度低、易误触、且无法双指缩放查看细节。真实电商项目中，更稳妥的做法是：默认只显示一个产品全参数（主产品），其他产品收进下拉选择或标签页切换；或者每行参数右侧加「展开」按钮，点开才显示所有产品值。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

  这比用 @media 调整 font-size 或强行压缩列宽更可靠——毕竟参数名长度不可控（比如“Wi-Fi 6E 双频并发最高速率”这种字段）。

  • 用 details/summary 实现无 JS 折叠（兼容性好，但样式定制弱）
  • 用 data-product-id 属性配合轻量 JS 切换当前显示列，避免 DOM 重绘
  • 绝对避免在 <table> 外层套 <code><div style="overflow-x: auto"> 后就不管了——iOS Safari 对 table 内部 sticky 支持不稳定，常导致冻结失效 <h3>避免用 <code>colspan / rowspan 做合并，改用语义化分组

    参数表里常有「网络制式」「充电规格」这类分组标题，新手习惯用 colspan="4" 拉通一行显示。问题在于：这会让表格逻辑结构断裂，影响屏幕阅读器遍历顺序，也阻碍 CSS Grid 替代方案的平滑迁移。

    真正需要的是视觉分组 + 语义保留。正确方式是用 <tbody> 分段，并加 <code><caption></caption> 或带 aria-labelledby 的 <h3></h3> 作组标题。

    • 每个参数组用独立 <tbody> 包裹，组间加 <code><tr class="group-divider"><td colspan="N"></td></tr>（仅作视觉分隔，不参与语义）
    • 组标题不用 <th colspan>，而用外部 <code><h3 id="net-group">网络制式</h3>，再给对应 <tbody> 加 <code>aria-labelledby="net-group"
    • 若必须合并单元格（如多级表头），仅限 <thead> 内，且确保 <code>scope 属性准确指向行列范围

      复杂点不在代码量，而在是否愿意把「参数属于哪个产品」这个关系，从视觉位置强绑定，转为用 HTML 结构和 ARIA 显式声明。多数人卡在这里，不是不会写 sticky，是没想清楚表格到底在表达什么关系。