纯HTML+CSS商品对比表须用语义化table结构：首行th设rowspan="2"列属性，次行th设colspan="1"填商品名；通过overflow-x: auto+sticky冻结表头与首列；状态用data-status属性配合CSS伪元素或色块直观呈现；价格用span.price+font-feature-settings:"tnum"等宽对齐；JS仅填充tbody，禁用innerHTML拼接结构。
怎么用纯 HTML + CSS 实现商品规格对比表格
纯 HTML 能做商品对比，但“能做”不等于“好用”——关键在结构设计。必须用 <table>，且表头要分层：第一行是通用属性（如“商品名称”“价格”），第二行才是各商品列。如果把商品名塞进 <th> 但没设 rowspan，横向滚动时表头会错位，用户根本对不上哪列对应哪个商品。
常见错误是把每个商品当一个独立 <div> 并排，看似灵活，实际无法对齐“内存容量”“续航时间”这类字段，也无法响应式折叠。真要语义清晰、可读性强、打印友好，<table> 是唯一合理选择。
- 第一行
<tr>放固定属性名，每个<th>设rowspan="2" - 第二行
<tr>放商品名，每个<th>设colspan="1"（显式写出来，避免 Safari 渲染异常） - 数据行统一用
<td>，别混用<th>，否则屏幕阅读器会误读为表头
让对比表支持横向滚动且表头冻结
手机上看多商品对比，列一多必然要横向滚动。但直接给 <table> 包一层 <div style="overflow-x: auto"> 不够——滚动时第一列（属性名）和顶部商品名都会消失。解决方法是拆成两个表：一个只放左侧属性列（固定宽度），另一个放商品数据列（可滚动），再用 CSS position: sticky 冻结首行首列。
更稳妥的做法是放弃“双表模拟”，改用单表 + sticky，但必须满足：父容器设 overflow-x: auto，<thead> 里所有 <th> 加 position: sticky; left: 0; 和 background: white（否则滚动时文字透底）。iOS Safari 对 sticky 支持不稳定，所以第一列的 left 值建议用 0px 而不是 0，避免解析失败。
立即学习“前端免费学习笔记（深入）”；
-
<th>冻结需同时设top: 0（冻顶）和left: 0px（冻左），缺一不可 - 冻结列后，记得给
<tbody><td>加padding-left: 1px，防止边框被 sticky 层遮住 - 不要给整个
<table>设width: 100%，会让小屏下内容被压缩变形；用min-width控制最小列宽更可靠
怎么让“有货/缺货”“支持/不支持”这类状态显示更直观
纯靠文字“是/否”或“✓/✗”不够快，用户扫一眼得反应。应该用内联样式控制颜色和符号，而不是 JS 动态插入图标——加载慢或 JS 失败时，至少文字还能看。状态单元格统一加 data-status 属性，CSS 用属性选择器匹配，比如 td[data-status="in_stock"]::before { content: "✅"; color: #4CAF50; }。
注意别滥用 Unicode 图标：有些安卓旧机型不支持 ✅，渲染成方块；更稳妥的是用 SVG 内联或字体图标，但那就超出纯 HTML 范围了。折中方案是文字 + 颜色 + 轻微背景色块：background-color: #f0fff4 配绿色文字，比纯图标兼容性高得多。
- 避免用
title属性做悬停提示，移动端不触发，且无障碍支持差 - “不支持”类状态建议用
color: #9e9e9e+text-decoration: line-through，比红色更中性 - 如果某规格项全商品都一致（如“保修期：1年”），可考虑合并单元格
colspan，减少视觉噪音
为什么不要用 JavaScript 生成对比表格结构
表格结构一旦由 JS 拼接字符串注入（比如 innerHTML = "<tr>..."），就失去语义化优势，搜索引擎抓不到规格关键词，屏幕阅读器可能跳过整张表，而且服务端无法预渲染——首屏白屏时间变长，SEO 友好度归零。真实项目里，商品数据来自接口，但表格骨架（<table><thead>...）必须写死在 HTML 里，JS 只负责填 <tbody> 数据。
另一个坑是监听窗口 resize 重绘表格——完全没必要。CSS Grid 或 Flex 布局才需要重算，<table> 本身具有天然流式特性，只要不用固定像素宽的 <td>，它自己会按内容撑开。强行 JS 适配，反而导致滚动卡顿和布局抖动。
- JS 只操作
<tbody>内的<tr>，不碰<thead>和<table>结构 - 填数据前先清空
<tbody>，用textContent赋值而非innerHTML，防 XSS - 若需排序或筛选，用
Array.sort()重排数据数组，再一次性重写<tbody>，别逐行 DOM 操作
最常被忽略的一点：对比表里的“价格”必须用 <span class="price"> 包裹，并设 font-feature-settings: "tnum";，确保数字等宽对齐，否则“¥999”和“¥12,999”会错位。这个细节在财务类、电商类对比中影响远超预期。
