如何仅用类与span实现表格中'ab'文本的精准对齐？

要实现所有行中'ab'文本的垂直对齐，同时保持表格单元格右对齐，无需依赖非断空格，可通过以下方式实现：

1. 保留<td>的text-align: right设置，确保单元格内容整体右对齐
2. 对仅包含'ab'的元素，用<span>包裹并配置以下样式：
   • 设置display: inline-block，让margin属性能正常影响布局
   • 使用margin-left: 2ch实现偏移，ch是相对字符宽度单位，正好对应2个字符的宽度（等宽字体下对齐精度更高）

完整代码示例 #

td {
    text-align: right;
    /* 可选：用等宽字体让对齐效果更精准 */
    font-family: monospace;
}

.align-ab {
    display: inline-block;
    margin-left: 2ch;
}

<table>
    <tr>
        <td>12ab34</td>
    </tr>
    <tr>
        <td>ab34</td>
    </tr>
    <tr>
        <td>ab34</td>
    </tr>
    <tr>
        <td><span class="align-ab">ab</span></td>
    </tr>
</table>

关键说明 #

• 为什么之前需要四个非断空格？
  非断空格( )不会被浏览器合并，但默认非等宽字体中，空格宽度通常小于普通字符，所以需要4个才能凑出2个字符的偏移量；如果是等宽字体，2个非断空格就足够。用ch单位可摆脱字体限制，实现精准对齐。
• 为什么之前的margin-right/padding-right无效？
  <span>默认是inline元素，这类元素的水平margin/padding在右对齐容器中无法有效推动内容偏移，改为inline-block后，元素具备块级盒模型特性，margin就能正常生效。

内容的提问来源于stack exchange，提问作者Andrei Cleland