text-align: right不能解决有效数字对齐问题，因为它仅按字符串末尾对齐，无法使不同表示法（如123.45、0.00678、1.2e+4）的有效数字最右位对齐；真正需对齐的是有效数字最右侧那一位的视觉列位置，必须通过JavaScript预格式化为等宽字符串，并配合等宽字体与固定表格布局实现。
为什么text-align: right不能解决有效数字对齐问题
因为 text-align: right 对齐的是字符串末尾，不是数值意义上的“有效数字右端”。比如 123.45、0.00678、1.2e+4 这三者右对齐后，小数点、指数符号、有效数字起始位置全都不在一条竖线上——人眼无法快速比对数量级或精度差异。
科学计算结果常含不同量级、不同位数、不同表示法（定点/浮点/科学计数），纯靠 CSS 水平对齐毫无意义。真正要对齐的，是“有效数字最右侧那一位”所处的视觉列位置，这需要预处理+排版协同。
- 直接往
<td>里塞原始数字（如0.000123456789）再加text-align: right，只会让显示混乱 - 用
Intl.NumberFormat或toPrecision()格式化后仍需控制字段宽度，否则位数不一致导致错位 - 表格本身无“有效数字感知能力”，它只渲染字符串；对齐责任在数据准备阶段，不在渲染阶段
如何用JavaScript统一格式化再注入HTML
关键不是“怎么对齐”，而是“对齐什么”。必须先将数值按有效数字规则截断/补零，生成等宽字符串，再交给表格渲染。
示例：保留 4 位有效数字，且所有结果占 10 个字符宽（含符号、小数点、指数）：
立即学习“前端免费学习笔记（深入）”；
function formatSci(num, sigDigits = 4, width = 10) {
if (num === 0) return '0'.padStart(width);
const abs = Math.abs(num);
const exp = Math.floor(Math.log10(abs));
const mantissa = parseFloat((num / Math.pow(10, exp)).toPrecision(sigDigits));
const formatted = mantissa.toFixed(sigDigits - 1 - (exp >= 0 ? 0 : -exp));
const str = `${mantissa}e${exp}`.padStart(width);
return str.length > width ? str.slice(0, width) : str.padStart(width);
}
// 使用：<td class="sci-value">${formatSci(0.000123456)}</td>- 别依赖
toExponential()直接输出——它不控制有效数字位数，也不保证等宽 - 用
padStart()补空格（非font-family: monospace下字符对齐可靠 - 负号占位要计入宽度，否则
-1.234e-5和1.234e+3长度不同，视觉错位
CSS 排版必须配合等宽字体与固定宽度单元格
即使 JS 输出了等宽字符串，若字体不是等宽，或单元格宽度不固定，字符仍会浮动。这不是对齐失效，是排版基础没搭牢。
必须同时满足三项：
-
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace—— 非等宽字体下，1和0宽度不同，对齐无从谈起 -
td.sci-value { text-align: right; min-width: 10ch; }——ch单位基于字符宽度，比px更适配等宽字体 -
table { table-layout: fixed; }—— 防止浏览器根据内容自动伸缩列宽，破坏预设对齐
漏掉任意一项，比如只设 text-align: right 却用 font-family: sans-serif，效果就和没做一样。
避免用 headers/class 混淆语义与格式
科学表格里，“有效数字对齐”是呈现规则，不是语义属性。别用 td[headers="result"] 或 class="significant" 去触发对齐逻辑——这会让样式和语义耦合，后续加一列“相对误差”时容易误套同一规则。
推荐分层处理：
- 语义层：用
<th scope="col">测量值</th>、<th scope="col">标准偏差</th>明确列含义 - 格式层：单独加
class="sci-value sci-4sig"或data-format="4sig"，CSS 只响应这类格式标记 - JS 层：按
data-format值调用对应格式函数，而非靠 class 名硬编码
真正难的不是写对齐代码，而是让“有效数字位数”这个业务规则，在数据生成、格式化、样式应用三个环节保持一致且可追溯。一旦某列用了 3 位，另一列用了 5 位，再精细的排版也救不了可读性。
