Bootstrap 5中text-end类无法实现右对齐问题求助

我在使用Bootstrap 5时遇到了text-align无法正确右对齐的问题。尝试添加text-end类，想要把表格里的总计内容对齐到最右侧，但没生效，截图如下：

我的代码如下：

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Quantity</th>
                <th scope="col">Unit Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var order in @Model.OrderDetails)
            {
                <tr>
                    <td>@order.Product.ProductName</td>
                    <td>@order.Quantity</td>
                    <td>$@order.UnitPrice/ea</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr class="text-end">
                <th>Total :</th>
                <td>$@Model.Order.Total</td>
            </tr>
        </tfoot>
    </table>
</div>

问题原因 #

tfoot里的<tr>只有两个单元格，但表头和表体都是三列，浏览器会自动将这两个单元格分配到前两列的宽度范围内，就算加了text-end，也只是在当前列内右对齐，无法撑到表格最右侧。加上Bootstrap表格列默认均分宽度，进一步导致内容没法靠到最右边。

解决方法 #

推荐两种实用方案：

方案1：合并单元格（语义化优先） #

修改tfoot部分的代码，让总计行的第一个单元格跨占前两列，再设置右对齐：

<tfoot>
    <tr>
        <th colspan="2" class="text-end">Total :</th>
        <td>$@Model.Order.Total</td>
    </tr>
</tfoot>

通过colspan="2"让<th>占据前两列的位置，配合text-end类，就能让"Total :"在合并后的列里右对齐，和总价一起靠到表格右侧。

方案2：单独设置单元格宽度 #

如果不想合并列，可以给tfoot里的<th>设置宽度为100%，同时给两个单元格都加上text-end类：

<tfoot>
    <tr>
        <th class="text-end" style="width: 100%;">Total :</th>
        <td class="text-end">$@Model.Order.Total</td>
    </tr>
</tfoot>

这种方式通过宽度设置让第一个单元格占据剩余空间，从而把内容推到右侧。

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