纯 html + css 响应式指标对比列表应使用语义化 结构，通过 text-align: right、等宽字体、 分离数值与单位、颜色+箭头区分正负、col 选择器统一列样式，确保小数点对齐和小屏可读性。
怎么用纯 HTML + CSS 实现响应式指标对比列表，不依赖框架
直接说结论：不用 JavaScript、不引入 Bootstrap 或 Tailwind，靠语义化 <table> + 精心设计的 CSS 类就能做出清晰、对齐、有视觉层次的指标对比列表。关键不是“多好看”，而是“一眼能比出高低”。
<p>常见错误是把指标全塞进 <code><div> 堆砌浮动，结果在小屏上错行、数值右对齐失效、单位和主值粘连。表格结构天然适合行列对齐，尤其当指标项固定（比如 Q1/Q2/Q3/Q4）、字段明确（如“完成率”“同比变化”“目标达成”）时，<code><table> 反而是最稳的选择。
<ul><li>表头用 <code><thead> 固定，避免滚动时丢失上下文
<li>数值列统一用 <code>text-align: right，百分比/金额等单位紧贴数字（如 92.3% 不拆成两格）
color: #27ae60（正），color: #e74c3c（负），但别仅靠颜色——加 ↑ ↓ 符号<th> 加 <code>scope="col"，提升可访问性
如何让指标数值右对齐又保持小数位一致
数值对不齐，对比就失效。CSS 的 text-align: right 只解决位置，不解决小数点对齐。真正靠谱的做法是用等宽字体 + 预设宽度 + 内部空格微调，或更稳妥的：用 <span></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> 容易语义混乱、样式失控。正确做法是拆解为带含义的子元素：
<pre class="brush:php;toolbar:false;"><td>
<span class="delta up" title="较去年同期上升">↑</span>
<span class="delta-value">+12.5</span><span class="delta-unit">%</span>
</td></pre>
<p>再配 CSS 控制间距与颜色：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178938727468962.jpg" alt="Markdown to HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="overflowclass">Markdown to HTML</a>
<p class="overflowclass">{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}</p>
</div>
<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">.delta { font-size: 0.9em; margin-right: 0.25em; }
.delta.up { color: #27ae60; }
.delta.down { color: #e74c3c; }
.delta-value { font-weight: 600; }</pre>
<ul>
<li>
<code>title 属性保留辅助说明，屏幕阅读器可读
为什么不要用 flex 布局替代 table 做指标对比
看起来 flex 更“现代”，但实际踩坑多：不同指标项长度差异大时，flex-basis 很难统一；小屏下 flex-wrap 会导致同一指标的“名称/数值/单位”断开；而且无法实现真正的行列对齐——比如所有“完成率”数值列想右对齐，所有“目标达成”列想居中，flex 得每行单独设 justify-content，维护成本爆炸。
而 <table> 天然支持列级样式：<code>col:nth-child(2) { text-align: right; } 一行代码搞定整列。
- 真要响应式折叠？用
@media把<table> 改成 <code>display: block，再用<div role="row"> 模拟行，但这是退化方案，优先保表格结构 <li>担心 SEO？<code><table> 语义比一堆 <code><div> 更利于爬虫理解数据关系 <li>Chrome/Firefox/Safari 对 <code><table> 渲染一致性远高于复杂 flex 嵌套 <p>做指标对比，稳定压倒一切。表格不是过时，是被用错了场景——它恰恰最适合结构化数值对比。</p> </table>
