应使用<table>而非<div>布局商品参数对比，因其语义正确、无障碍友好、打印适配；需规范使用<thead><th scope>、<colgroup>控制列宽、单位/图标用<span>包裹，并在小屏下切换为纵向展开模式。
表格结构用 <table> 而不是 <div> 布局
商品参数对比本质是二维数据关系（参数项 × 商品列），<table> 语义正确、屏幕阅读器友好、打印样式天然适配。用 <div> 模拟表格会增加 CSS 复杂度，且在缩放或窄屏下极易错行——尤其当某项参数值含长字符串或换行文本时。
关键点：
-
<thead>只放一列“参数名”+多列“商品名”，<th>必须带scope="col"或scope="row" - 每行参数用
<tr>包裹，首单元格用<th scope="row">标识参数名称 - 避免嵌套表格；横向滚动区域用
<div style="overflow-x: auto">包裹整个<table>
colgroup 控制列宽比写死 width 更可靠
商品列数常不固定（3款 vs 5款），写死 width 容易导致最后一列被压缩或溢出。用 <colgroup> 配合相对单位更稳：
<colgroup> <col style="width: 20%"> <!-- 参数名列 --> <col style="width: 20%"> <!-- 商品1 --> <col style="width: 20%"> <!-- 商品2 --> <col style="width: 20%"> <!-- 商品3 --> <col style="width: 20%"> <!-- 商品4 --> </colgroup>
注意：<col> 的 width 值会被 <td> 内联样式覆盖，所以不要在单元格里再设 width；移动端可改用 min-width 配合 table-layout: fixed 防止文字撑破列宽。
立即学习“前端免费学习笔记（深入）”；
参数值含图标/单位时，用 <span> 包裹而非纯文本
比如“续航：12h”里的 h、“内存：16GB”里的 GB——这些单位若和数字混写，CSS 难以单独控制颜色或字体大小。同理，✅/❌ 图标若直接用字符，缩放时易模糊，应优先用 SVG 或 Unicode 字符 + <span class="icon">。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
实操建议：
- 单位统一用
<span class="unit">GB</span>，CSS 设.unit { font-size: 0.85em; color: #666; } - 状态图标用
<span aria-label="支持快充" class="icon">⚡</span>，并补aria-label - 避免在
<td>里写复杂 HTML 结构，否则影响表格行高计算
响应式断点要防“列错位”，不是单纯隐藏列
小屏下直接隐藏商品列（如 display: none）会导致整行参数只剩名称，失去对比意义。更合理的做法是切换为“单商品纵向展开”模式：
用媒体查询检测宽度，当 max-width: 768px 时：
- 给
<table>加display: block - 每个
<tr>改为display: block; margin-bottom: 1rem -
<th scope="row">和对应<td>并排用display: flex，参数名固定宽，值自适应
这种切换比强行横向滚动更利于用户逐项对比，也避免手指误触相邻列。
真正难的是参数项动态增减（比如新增“是否支持 Wi-Fi 6E”），此时 <colgroup> 需配合 JS 重算列宽，手动维护容易漏掉某列的 scope 属性——这比样式问题更隐蔽，但会直接影响无障碍访问。
