如何在HTML math表格中实现左侧列文本右对齐？

给左侧添加text-align: right后未按预期右对齐，反而变成左对齐，原因是MathML元素的布局逻辑和普通HTML元素不同，普通CSS的文本对齐规则无法直接作用于默认布局的。以下是两种可行的解决方法：

方法一：使用MathML原生columnalign属性（推荐） #

直接在<mtable>上设置列对齐规则，这是MathML规范内置的表格对齐方式，兼容性和可靠性更好，无需额外CSS类：

<math>
<mtable columnalign="right left">
  <mtr>
    <mtd>a + 7</mtd>
    <mtd> = b</mtd>
  </mtr>
  <mtr>
    <mtd>c</mtd>
    <mtd> = d - 8</mtd>
  </mtr>
</mtable>
</math>

columnalign属性的值用空格分隔，依次对应每一列的对齐方式：第一个值right设置第一列右对齐，第二个值left设置第二列左对齐。

方法二：调整CSS强制为块级元素 #

如果一定要用CSS实现，需要将转为块级元素，让text-align规则生效：

.math_td_left {
    display: block;
    text-align: right;
}

.math_td_right {
    display: block;
    text-align: left;
}

HTML代码保持你原来的结构即可，修改CSS后文本对齐规则就能正常作用。

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