<table>仅适用于参数对比场景，需用scope属性明确行列语义，禁用跨列合并与交互控件；移动端应重构为垂直卡片，打印时恢复表格布局。
直接用 <table> 做多规格商品属性交叉排列，是可行的，但必须满足一个前提：你展示的是「参数对比」，而不是「商品列表」。一旦混淆这两类语义，后续响应式、无障碍、导出和维护都会出问题。
什么时候该用 <table> 做规格交叉排列
只适用于用户需要横向比对多个 SKU 的固定属性值，比如「iPhone 15 Pro vs Pixel 8 vs Galaxy S24」在「处理器」「屏幕刷新率」「主摄像素」等维度上的数值差异。这种场景下，行列关系明确：<th scope="col"> 是商品名，<th scope="row"> 是参数项，每个 <td> 是具体值。
- 典型场景：商品详情页底部的“参数对比表”、采购选型文档、B2B 报价单中的规格对照
- 不适用场景：商品筛选页的属性多选面板（那是交互控件，不是数据表）、SKU 选择器弹窗（那是状态驱动 UI，不是静态对比）
- 若把颜色/尺寸等可变属性强行塞进表格列头（如
<th>黑色-128GB</th><th>黑色-256GB</th>），会导致列数爆炸、语义错乱、无法动态增删规格组合
<table> 中跨规格属性的正确结构写法
关键不是“怎么让表格看起来像淘宝”，而是“怎么让机器和人都能准确理解哪一列对应哪个 SKU、哪一行对应哪个属性”。靠的是 scope 属性和严格行列对齐，不是 CSS 样式。
- 第一行必须是
<thead><tr><th scope="col">商品名</th><th scope="col">iPhone 15 Pro</th><th scope="col">Pixel 8</th></tr></thead> - 每行参数必须以
<th scope="row">处理器</th>开头，后面跟<td>A17 Pro</td><td>Tensor G3</td> - 禁止用
<td colspan="2">合并单元格来“模拟”分组标题（如“性能参数”），应改用<tbody>分段 +<caption>或独立 heading - 所有
<tr>必须含相同数量的单元格（含<th scope="row">），否则辅助技术会读错行列映射
长规格文本撑破表格的硬解法
“高通骁龙 8 Gen 3（4nm 工艺，主频 3.3GHz）”这类字符串，默认会破坏列宽一致性。只设 white-space: nowrap 或固定 width 都不行——前者溢出容器，后者在小屏上强制横向滚动。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 真正生效的最小 CSS 组合是三行：
max-width: 180px+overflow: hidden+text-overflow: ellipsis - 必须同时作用于
<th>和<td>，且不能被父级display: flex或inline-block覆盖 - 如果某列内容全是短文本（如“有/无”“支持/不支持”），可单独加
min-width: 60px防止压缩过度 - 禁用
border-collapse: collapse；改用border-spacing: 8px保证小屏下仍有视觉呼吸感
移动端垂直卡片化不是“降级”，而是必要重构
当屏幕宽度 < 768px 时，硬撑横向表格只会让用户左右拖拽。这不是体验问题，是语义失效——原本的二维对比关系，在单列流中已无法建立。
- 用媒体查询切换布局：
@media (max-width: 767px) { .param-table { display: block; } .param-table thead { display: none; } } - 每商品转为独立
<section class="card">，内部用<dl>呈现参数（<dt>处理器</dt><dd>A17 Pro</dd>），保持术语-描述语义 - 不要试图用 JS 动态重排
<tr>为卡片——DOM 结构没变，屏幕阅读器仍按表格逻辑读取，反而更混乱 - 打印样式表里要恢复
display: table，否则 PDF 导出仍是碎片化卡片
最容易被忽略的点：表格里放交互控件（如“加入对比”复选框）会破坏数据表语义。真要加操作，得用 <td><button>对比</button></td> 并配 aria-label="将 iPhone 15 Pro 加入对比列表"，而不是塞个 <input type="checkbox"> ——后者会让辅助工具误以为这是数据单元格的一部分。
