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