用纯HTML+CSS实现可读性强的商品对比表，关键在于语义化表格结构：首行用<th scope="col">定义商品维度，首列用<th scope="row">定义参数维度，合理使用colspan/rowspan处理多级表头，配合table-layout:fixed、word-break:break-word及响应式字体与最小宽度控制，避免display:none隐藏列；非结构化信息应移出表格。
怎么用纯 HTML + CSS 实现可读性强的商品对比表格
直接说结论：不用 JavaScript 也能做出清晰、响应式、语义正确的商品对比表，关键在 <table> 结构设计和 colspan/rowspan 的合理使用——很多人一上来就套 Bootstrap 表格类，反而让语义混乱、屏幕阅读器无法理解“哪一列对应哪一款商品”。
典型错误是把商品名塞进 <th> 当表头，但参数项（如“处理器”“电池容量”）又没统一归为行标题，导致结构扁平、不可扩展。正确做法是让第一列作为参数维度（<th scope="row">），首行作为商品维度（<th scope="col">），形成二维语义矩阵。
-
scope="row"必须加在参数名称单元格上，否则辅助技术无法关联数据单元格与参数含义 - 如果某参数只适用于部分商品（如“5G 支持”对 4G 版不适用），不要留空，填
-或不支持，避免 colspan 错位引发渲染错乱 - 移动端优先时，别用
display: none隐藏整列——改用 CSS@media调整table-layout: fixed+min-width，否则横向滚动体验极差
为什么 colspan 和 rowspan 在对比表里不能乱用
常见翻车点：为了“合并标题栏”，给首行商品名加 colspan="2"，结果后续所有 <tr> 行必须严格对齐列数，稍有不慎就出现错列、跨行错位、打印时内容被截断。
真正需要合并的只有两类场景：多级表头（如“网络制式”下分“4G频段”“5G频段”）和跨参数组的说明行（如“摄像头”大类下带子项）。其他情况一律保持单列对齐。
立即学习“前端免费学习笔记（深入）”；
- 首行商品标题用普通
<th scope="col">，不加colspan - 若需分组，用嵌套
<thead>：外层<tr>写大类（colspan合理），内层<tr>写具体参数（rowspan对应参数行数） -
rowspan值必须等于它要跨越的<td>行数，且后续行中对应位置要跳过该单元格——否则浏览器会自动补<td>，造成错位
CSS 怎么让对比表在手机上不左右滑动还能看清
硬设 overflow-x: auto 是懒办法，用户得手动拖，且焦点键盘导航失效。更稳妥的是用 CSS 容器控制宽度 + 表格自适应压缩，核心是三句话：
table { table-layout: fixed; width: 100%; }
td, th { word-break: break-word; min-width: 80px; }
@media (max-width: 768px) {
table { font-size: 14px; }
th:first-child, td:first-child { font-weight: bold; background: #f9f9f9; }
}
注意：不要给 <table> 设固定像素宽（如 width: 1200px），否则小屏必然溢出；也不要依赖 white-space: nowrap 强制单行——长参数值（如芯片型号“MediaTek Dimensity 7300 Ultra”）会直接撑爆容器。
- 用
min-width控制列最小可用空间，比width更柔性 - 首列（参数名）加
font-weight: bold和浅灰背景，在窄屏下能快速定位维度 - 真遇到超长文本（如接口协议列表），用
title属性提供悬停提示，而不是塞进单元格
哪些参数不适合放进表格？怎么处理它们
不是所有商品信息都适合表格化。“包装清单”“售后政策”“用户评价摘要”这类非结构化或高变异性内容，硬塞进 <td> 会导致列宽失控、语义失焦，甚至影响 SEO。
正确策略是拆出来：表格只承载可枚举、可对比、类型一致的参数（如重量、分辨率、充电功率），其余用独立区块呈现，通过视觉间距和 heading 级别区分层次。
- 避免在
<td>里放按钮、链接、图片——这些交互元素会破坏表格的静态对比属性 - “是否支持无线充电”这种布尔值，统一用 ✅ / ❌ 符号，比写“是/否”更省空间且易扫读
- 数值类参数（如“续航时间”）务必标注单位（
12 小时），且单位不单独占列——单位是数值的一部分，不是新维度
最常被忽略的是参数粒度：把“主摄传感器”和“主摄光圈”拆成两行，比合并成“主摄：IMX989，f/1.8”更利于横向对比，也方便后期加筛选逻辑。
