Bootstrap中金额数字左对齐且保持数值相对对齐的实现问题

嘿，我完全get到你的需求了——整个数据列要左对齐，但金额数字得像截图里那样保持相对对齐（比如小数点齐刷刷对齐），对吧？这其实是报表类表格里超常见的需求，给你几个简单好用的方案，不用复杂CSS就能搞定：

方案1：用包裹金额（最稳妥，兼容性拉满） #

给金额单独套个<span>，通过控制span的样式来实现“td左对齐，金额内部右对齐”的效果：

<tr>
  <td style="text-align: left">张三</td>
  <td style="text-align: left">
    <span style="display: inline-block; width: 90px; text-align: right;">1234.56</span>
  </td>
  <td style="text-align: center">2024-05-20</td>
</tr>
<tr>
  <td style="text-align: left">李四</td>
  <td style="text-align: left">
    <span style="display: inline-block; width: 90px; text-align: right;">78.9</span>
  </td>
  <td style="text-align: center">2024-05-21</td>
</tr>

• 核心逻辑：td保持左对齐，里面的span设置inline-block和固定宽度（根据你最长的金额长度调整），再给span设置右对齐，这样所有金额都会在各自的span里靠右，自然就实现了相对对齐，同时整个td还是左对齐的。

方案2：用CSS Grid在td内部实现（无额外标签） #

如果不想加多余的<span>，可以直接给金额所在的td用Grid布局：

<tr>
  <td style="text-align: left">张三</td>
  <td style="text-align: left; display: grid; justify-items: end;">1234.56</td>
  <td style="text-align: center">2024-05-20</td>
</tr>
<tr>
  <td style="text-align: left">李四</td>
  <td style="text-align: left; display: grid; justify-items: end;">78.9</td>
  <td style="text-align: center">2024-05-21</td>
</tr>

• 核心逻辑：td本身左对齐，内部用Grid的justify-items: end让内容靠右，这样金额就会在td内部右侧对齐，同时整个td还是左对齐状态，完美满足你的要求。

方案3：用text-align-last（极简，但注意兼容性） #

如果你的目标浏览器都是现代浏览器（Chrome、Firefox、Edge等），可以试试这个极简写法：

<tr>
  <td style="text-align: left">张三</td>
  <td style="text-align: left; text-align-last: right;">1234.56</td>
  <td style="text-align: center">2024-05-20</td>
</tr>
<tr>
  <td style="text-align: left">李四</td>
  <td style="text-align: left; text-align-last: right;">78.9</td>
  <td style="text-align: center">2024-05-21</td>
</tr>

• 核心逻辑：text-align: left保证td整体左对齐，text-align-last: right让td内的最后一行（这里只有一行金额）右对齐，实现数字相对对齐。缺点是IE浏览器不支持，所以如果要兼容旧版浏览器，还是优先方案1。

内容的提问来源于stack exchange，提问作者B. Dionys