admin管理员组

文章数量:1221457

I'm having an issue in properly setting my text-align to the right using Bootstrap 5. After some investigating I thought by adding class=text-end from this question would help me move the total to the very end of my table, but as you can see from the pic below that is not the case. Why is this happening and how can I fix this?

<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>[email protected]/ea</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr class="text-end">
                <th>Total :</th>
                <td>[email protected]</td>
            </tr>
        </tfoot>
    </table>
</div>

I'm having an issue in properly setting my text-align to the right using Bootstrap 5. After some investigating I thought by adding class=text-end from this question would help me move the total to the very end of my table, but as you can see from the pic below that is not the case. Why is this happening and how can I fix this?

<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>[email protected]/ea</td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr class="text-end">
                <th>Total :</th>
                <td>[email protected]</td>
            </tr>
        </tfoot>
    </table>
</div>

  • html
  • css
  • bootstrap-5
Share Improve this question edited Feb 8 at 0:51 Yong Shun 51.2k6 gold badges35 silver badges63 bronze badges asked Feb 7 at 22:10 DonDavid12DonDavid12 1977 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 2

You should specify the Total header column to use 2 columns via colspan="2" in the footer.

<tr class="text-end">
  <th colspan="2">Total :</th>
  <td class="text-end">[email protected]</td>
</tr>

Demo @ StackBlitz

本文标签： htmlBootstrap 5textend class is not properly alignedStack Overflow

版权声明：本文标题：html - Bootstrap 5 - text-end class is not properly aligned - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739287115a2156517.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。