纯 HTML + CSS 响应式指标对比列表应使用语义化 <table> 结构，通过 text-align: right、等宽字体、<span> 分离数值与单位、颜色+箭头区分正负、col 选择器统一列样式，确保小数点对齐和小屏可读性。
怎么用纯 HTML + CSS 实现响应式指标对比列表，不依赖框架
直接说结论：不用 JavaScript、不引入 Bootstrap 或 Tailwind，靠语义化 <table> + 精心设计的 CSS 类就能做出清晰、对齐、有视觉层次的指标对比列表。关键不是“多好看”，而是“一眼能比出高低”。
常见错误是把指标全塞进 <div> 堆砌浮动，结果在小屏上错行、数值右对齐失效、单位和主值粘连。表格结构天然适合行列对齐，尤其当指标项固定（比如 Q1/Q2/Q3/Q4）、字段明确（如“完成率”“同比变化”“目标达成”）时，<table> 反而是最稳的选择。
- 表头用
<thead>固定，避免滚动时丢失上下文 - 数值列统一用
text-align: right，百分比/金额等单位紧贴数字（如92.3%不拆成两格） - 正负值用颜色区分：
color: #27ae60（正），color: #e74c3c（负），但别仅靠颜色——加 ↑ ↓ 符号 - 给
<th>加scope="col"，提升可访问性
如何让指标数值右对齐又保持小数位一致
数值对不齐，对比就失效。CSS 的 text-align: right 只解决位置，不解决小数点对齐。真正靠谱的做法是用等宽字体 + 预设宽度 + 内部空格微调，或更稳妥的：用 <span> 包裹数值主体和单位，分别控制。
例如：<td><span class="metric-value">87.42</span><span class="metric-unit">%</span></td>，然后：
立即学习“前端免费学习笔记（深入）”；
td {
font-family: "SFMono-Regular", Consolas, monospace;
}
.metric-value {
display: inline-block;
min-width: 5em;
text-align: right;
}
.metric-unit {
margin-left: 0.1em;
color: #7f8c8d;
}
这样 “87.42%” 和 “102.00%” 的小数点会自然纵向对齐，且单位不会挤进数字里。
- 避免用
white-space: pre或 手动空格——维护困难，缩进错乱 - 整数指标（如“订单量 12,483”）同样适用：把逗号分隔符和数字一起放
metric-value，单位“件”放metric-unit - 移动端可设
.metric-value { min-width: 4em }防止换行
怎么处理“同比+12.5%”这类带符号和文字的复合指标
这种字段本质是「数值 + 变化方向 + 变化幅度」三部分，硬塞进一个 <td> 容易语义混乱、样式失控。正确做法是拆解为带含义的子元素：
<td> <span class="delta up" title="较去年同期上升">↑</span> <span class="delta-value">+12.5</span><span class="delta-unit">%</span> </td>
再配 CSS 控制间距与颜色：
.delta { font-size: 0.9em; margin-right: 0.25em; }
.delta.up { color: #27ae60; }
.delta.down { color: #e74c3c; }
.delta-value { font-weight: 600; }
-
title属性保留辅助说明，屏幕阅读器可读 - 别用 Unicode 箭头字符（如 ▲）——渲染不一致，有些字体缺失
- 如果后端返回的是字符串 “+12.5%”，前端 JS 拆解不如后端直接输出结构化 JSON，但纯静态页就按上述 HTML 结构手写
为什么不要用 flex 布局替代 table 做指标对比
看起来 flex 更“现代”，但实际踩坑多：不同指标项长度差异大时，flex-basis 很难统一；小屏下 flex-wrap 会导致同一指标的“名称/数值/单位”断开；而且无法实现真正的行列对齐——比如所有“完成率”数值列想右对齐，所有“目标达成”列想居中，flex 得每行单独设 justify-content，维护成本爆炸。
而 <table> 天然支持列级样式：col:nth-child(2) { text-align: right; } 一行代码搞定整列。
- 真要响应式折叠？用
@media把<table>改成display: block，再用<div role="row">模拟行，但这是退化方案，优先保表格结构 - 担心 SEO？
<table>语义比一堆<div>更利于爬虫理解数据关系 - Chrome/Firefox/Safari 对
<table>渲染一致性远高于复杂 flex 嵌套
做指标对比，稳定压倒一切。表格不是过时，是被用错了场景——它恰恰最适合结构化数值对比。
