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