是唯一兼顾语义、可访问性与响应式的对比图方案；作为原生二维数据单元，确保屏幕阅读器正确识别行列关系、搜索引擎提取对比信号，且须配合、data-label及特定css实现多端可用。
用 <table> 做对比图不是“能用就行”，而是唯一兼顾语义、可访问性和响应式的方案；<code><td> 的角色很明确：只放数据，不定义结构，乱用会直接破坏屏幕阅读器朗读顺序和移动端重排逻辑。
<h3>为什么必须用 <code><td> 而不是 <code><div> 或 <code><span></span> 放参数值
<td> 是浏览器原生识别的二维数据单元，它的存在让辅助技术知道“这个值属于第几行第几列”。换成 <code><div> 后，VoiceOver 会按 DOM 顺序逐个读“iPhone 15 → 处理器 → 高通骁龙 8 Gen 3 → 电池容量 → 4852mAh”，完全丢失行列对应关系。搜索引擎也无法提取“Pixel 8 的内存 vs iPhone 15 的内存”这类对比信号。
<ul><li>所有参数具体数值（如 <code>"12GB RAM"、"iOS 18"）必须放在 <td> 里
<li>首列参数名（如“操作系统”“运行内存”）用 <code><th scope="row">，不是 <code><td>
<li>首行商品名（如“Mate 60 Pro”“S24 Ultra”）用 <code><th scope="col">，也不是 <code><td>
<li>哪怕内容是图标（✅/❌）或链接（<code>@#@#@#@#@#@#@#@#@#@0），只要它是数据，就仍用 <td>
<h3><code><td> 里长文本撑破表格怎么办
<p>参数常含长字符串，比如 <code>"LPDDR5X + UFS 4.0（支持 PCIe 5.0 x2 通道）"，默认会把整列拉宽，破坏横向对齐。纯设 white-space: nowrap 会导致溢出容器，用户得横向滚动——这是最差体验。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
- 必须组合这三行 CSS：
max-width: 200px、text-overflow: ellipsis、word-break: break-word -
text-overflow: ellipsis只在white-space: normal下生效，很多人漏掉这一句 - 别给
<td> 单独设 <code>width，它会强制等宽，导致“屏幕尺寸”和“充电功率”两列一样宽，浪费空间 - 真正控制列宽的是父级
<th> 或 <code><col>，<td> 只负责内容渲染 <h3>移动端怎么让 <code><td> 不错位、不丢失语义 <p>小屏下硬缩放或加 <code>overflow-x: auto是自欺欺人：用户拖不动、看不清、没法复制。正确做法是用 CSS 把每行<tr> 变成独立卡片，但必须保留每个 <code><td> 的原始语义。 <ul><li>给每个 <code><td> 加 <code>data-label属性，例如<td data-label="快充功率">100W</td> - 在
@media (max-width: 768px)中，把<tr> 设为 <code>display: block，<td> 设为 <code>display: block - 用
td::before { content: attr(data-label) "："; }补回参数名，确保视觉和读屏都完整 - 绝对不要用
transform或position: absolute移动<td> 位置——焦点顺序和朗读顺序会彻底错乱 <p>最容易被忽略的是 <code>scope属性和data-label的配合：前者保大屏语义，后者保小屏可访问性，缺一不可。表格一旦脱离二维结构，<td> 就不再是“单元格”，而只是带样式的普通块元素——这时候你其实已经放弃了表格本该提供的所有优势。</td>
