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>
1 Answer
Reset to default 2You 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