用<table>做对比图表最可靠，因其语义正确且兼容打印、PDF导出和屏幕阅读器；两列对比必须用<thead>+<th scope="col">明确列标题，参数名用<th scope="row">标行标题；长文本需三行CSS组合控制：max-width、overflow:hidden、text-overflow:ellipsis配合white-space:normal和word-break:break-word；小屏（max-width:480px）应切换为垂直卡片布局，隐藏<thead>并用display:block重构；禁用border-collapse:collapse和rowspan/colspan以保语义完整。
直接用 <table> 做对比图表最可靠，不是“老办法”，而是语义正确、打印/导出/PDF/屏幕阅读器都认得清——别为了“看起来现代”硬套 div + flex，一加响应式或导出就错行、参数对不齐、没法横向扫视。
为什么两列对比必须用 <thead> + <th scope="col">
两列对比（比如“A vs B”）本质是“同一参数在两个对象上的取值”，属于明确的二维关系。表头不写 <thead>、不用 <th scope="col">，辅助技术读不出“这是列标题”，用户也无法靠语义快速定位“A 的内存”在哪一列。
-
<th scope="col">必须放在首行，标明“iPhone 15”“Pixel 8”是列名 - 参数名（如“处理器”“电池容量”）要放在第一列，用
<th scope="row">，否则无法表达“这一行说的是什么” - 全用
<td>或混用<th>不带scope，会导致导出 Excel 时列名丢失、排序错乱
长文本撑破表格？三行 CSS 必须一起用
商品参数常含长字符串，比如“高通骁龙 8 Gen 3（4nm 工艺，主频 3.3GHz）”，只设 white-space: nowrap 会溢出容器；只设固定 width 又在小屏上强制横向滚动。真正起效的是这三行组合：
.param-table td, .param-table th {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
}
-
max-width控制单格宽度上限，防止单列独大破坏对比节奏 -
text-overflow: ellipsis要配合white-space: normal才生效，很多人漏掉后者 -
word-break: break-word确保中英文混合长串也能合理换行，不卡死布局
小屏怎么不变成横向滚动？垂直卡片布局切换点要卡准
桌面端两列并排很清晰，但手机屏宽通常不足 400px，强行维持表格会触发横向滚动，用户必须左右拖——这不是“响应式”，是反体验。正确做法是用媒体查询在 max-width: 480px 切换为垂直卡片：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.param-table { display: block; }
.param-table thead { display: none; }
.param-table tr { display: block; margin-bottom: 1rem; border: 1px solid #eee; }
.param-table th:first-child,
.param-table td:first-child { font-weight: bold; }
.param-table td:not(:first-child) { padding-left: 1em; }
}
- 切点选
480px是因多数安卓小屏、iOS 竖屏 iPhone SE 都在此范围下 - 隐藏
<thead>后，每行变成独立卡片，第一列参数名保留加粗，第二列值缩进对齐 - 千万别用
border-collapse: collapse，它会让小屏卡片边界消失；改用border-spacing控制商品间空隙
合并单元格（rowspan/colspan）看似能简化结构，但在对比场景里极易破坏行列语义——比如把“存储类型”合并两行，后面“对象存储”“文件存储”的子项就无法和另一列商品对齐。真需要分组，宁可用嵌套 <details> 或分段 <section>，别动表格骨架。
