参数对比必须用语义化<table>，配<thead>与scope属性；长文本需max-width、text-overflow、word-break三者协同；小屏应切垂直卡片布局。
参数表格必须用 <table>，别碰 Grid/Flex
参数对比本质是二维语义关系：同一行代表一个参数（如“内存”“分辨率”），同一列代表一个对象（如“iPhone 15”“Pixel 8”）。<table> 是唯一被屏幕阅读器、PDF 导出工具、打印样式和 Excel 导入逻辑原生识别的结构。用 div + display: grid 做参数表，导出 PDF 时行列错位、Excel 打开后列名全丢、盲人用户无法定位“iPhone 的电池容量在哪一列”——这不是兼容性问题，是语义缺失。
<thead> 和 scope 属性不能省
不写 <thead> 或漏掉 scope，等于把参数表变成纯视觉排版。辅助技术读不出哪是列标题、哪是行标题，导出也大概率失败。
-
<th scope="col">必须放在第一行，标出“iPhone 15”“Galaxy S24”这些是列名 -
<th scope="row">必须放在第一列，标出“处理器”“屏幕尺寸”这些是参数名 - 全用
<td>或混用没scope的<th>，会导致导出 Excel 时第一行被当普通数据，列名丢失 -
<tbody>必须包裹所有数据行，不能只写<tr><td>堆砌
长文本溢出要三行 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 thead,
.param-table tbody tr {
display: block;
}
.param-table th[scope="col"],
.param-table td {
display: block;
width: 100%;
}
.param-table th[scope="row"] {
font-weight: bold;
margin-top: 8px;
}
}
关键点：隐藏 <thead>，把每行参数转成一个带标题的块；否则用户得左右拖着看“处理器：”，再拖回来找“iPhone 15”的值——这种交互没人受得了。
