I am trying to format a table with footer items in HTML. I want the first footer item to be aligned left and the rest to be aligned right.
Here is the desired layout:
https://i.sstatic.net/ZRNEp.png
table {
width: 100%
}<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
</tbody>
<tfoot class="footer">
<tr align="left">
<td id="cart_voucher" class=" cart_voucher">
<form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
<div class="form-group form-group-placeholder">
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Discount Code" value="">
<i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
<input type="hidden" name="submitDiscount">
</div>
</form>
</td>
</tr>
<!-- end VOUCHER -->
<!-- Total products -->
<tr align="right">
<td>Total products </td>
<td id="total_product">$500.00</td>
</tr>
<tr align="right">
<td Total shipping (tax incl.):>
</td>
<td id="total_shipping" class="price-opc">$12.00</td>
</tr>
<tr align="right">
<td>Total (tax excl.):</td>
<td id="total_price_without_tax" class="price-opc">$418.50</td>
</tr>
<!-- end Total tax excl. -->
<!-- Total tax -->
<tr align="right">
<td>Total tax:</td>
<td>$93.50</td>
</tr>
<!-- end Total tax -->
<tr align="right">
<td>Total:</td>
<td>
<span>$512.00</span>
</td>
</tr>
</tfoot>
</table>I attempted to use inline align="left" for the first footer element and align="right" for the others, but it did not work as expected:
https://i.sstatic.net/Xoarq.png
UPDATE with further clarification: In the footer of the table, there is a form input and other data. The form input should be on the left and the remaining elements on the right, illustrated in the image below: https://i.sstatic.net/Awa3H.png
I tried using flex-box for each tr but encountered issues. Can someone provide guidance on how to achieve this layout? I only need the first element in the footer to align left and the rest to align right. Thank you in advance for any assistance or suggestions. Please disregard the thead and tbody, focusing solely on the tfoot.