text-align 必须加在 td 或 th 上才生效，直接加给 table 无效；应弃用 align 属性，统一用 css 控制对齐，并配合 monospace 或 tabular-nums 确保数字右对齐整齐。
text-align 加在 td 或 th 上才起效
直接给 table 元素加 text-align: right 是无效的——text-align 不继承，也不作用于表格本身，只对块级容器内部的行内内容生效。td 和 th 是块级上下文（即使没显式设 display: block），所以样式必须落在它们身上。
- ✅ 正确：
<td style="text-align: right">¥1,234.56</td> - ❌ 无效：
<table style="text-align: right"><td>¥1,234.56</td></table> - ⚠️ 注意：
th默认居中，若要左对齐标题，也得显式写text-align: left
别用 HTML 的 align 属性
align="right" 是 HTML4 遗留属性，在 HTML5 中已废弃。它不仅语义不清，还会在 Outlook、旧版 Android WebView 等环境里覆盖 CSS 的 text-align，导致样式失效或不一致。
- ❌ 混用风险：
<td align="right" style="text-align: left">数字</td>—— 某些邮件客户端会无视style，坚持右对齐 - ✅ 统一方案：全量移除
align属性，改用类名或内联style - ? 小技巧：用浏览器开发者工具检查「Computed」面板，确认最终生效的是哪条规则；若看到
align被解析为内联样式，说明有框架或 CMS 自动注入了过时属性
右对齐数字时，font-family: monospace 很关键
普通字体中，数字宽度不等（比如 1 窄、0 宽），右对齐后小数点会错位，影响可读性。等宽字体能保证所有字符占相同空间，让金额列真正“垂直对齐”。
- ✅ 推荐写法：
<td class="amount">¥123.45</td>，配合 CSS：.amount { text-align: right; font-family: monospace; } - ⚠️ 注意：不要只依赖
text-align，否则¥9.99和¥1000.00的小数点会明显偏移 - ? 可选替代：用
font-variant-numeric: tabular-nums（现代浏览器支持），比monospace更轻量，且保留字体设计感
响应式对齐不能只靠 media query 切 text-align
写 @media (max-width: 768px) { .numeric { text-align: left; } } 看似合理，但容易漏掉两个关键点：一是未重置大屏断点下的值，导致小屏生效后大屏反而失效；二是忽略 RTL（从右向左）语言场景。
- ✅ 安全写法：默认用逻辑值
text-align: end（LTR 下 = right，RTL 下 = left），再按需覆盖：@media (min-width: 769px) { .numeric { text-align: end; } } - ⚠️ 常见坑：只写小屏规则，大屏没声明，结果继承了父级或浏览器默认的
left，数字列突然左对齐 - ? 真实约束：IE11 不支持
text-align: end，如需兼容，得用direction: rtl+text-align: right组合模拟，但代价是破坏语义
align 属性，把所有对齐逻辑收归 CSS，哪怕只是加一行 style，也好过留着废弃标记。最易被忽略的不是语法，而是字体选择和响应式断点的双向覆盖。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
