выровнять нижний колонтитул таблицы вправо

Question

У меня есть таблица, которая содержит данные, и я хочу, чтобы первый элемент нижнего колонтитула был выровнен по левому краю, а остальные - по правому краю.

Здесь ожидаемые результаты:

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="Kod rabatowy" 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 zł</td>
    </tr>
    <tr align="right">
      <td Total shipping (tax incl.):>
      </td>
      <td id="total_shipping" class="price-opc">12,00 zł</td>
    </tr>
    <tr align="right">
      <td>Total (tax excl.):</td>
      <td id="total_price_without_tax" class="price-opc">418,50 zł</td>
    </tr>
    <!-- end Total tax excl. -->
    <!-- Total tax -->
    <tr align="right">
      <td>Total tax:</td>
      <td>93,50 zł</td>
    </tr>
    <!-- end Total tax -->
    <tr align="right">
      <td>Total:</td>
      <td>
        <span>512,00 zł</span>
      </td>
    </tr>
  </tfoot>
</table>

Я использовал встроенный align="left" для первого элемента нижнего колонтитула и align="right" для остальных. Я получаю следующее:

ОБНОВЛЕНИЕ больше объяснений В нижнем колонтитуле у нас есть ввод формы и другие данные, ввод формы следует оставить слева, а оставшийся элемент нижнего колонтитула должен быть справа, как показано на рисунке ниже.

Я пытался использовать flex-box для каждого tr, но ничего не получалось. Может кто-нибудь, пожалуйста, помогите мне? Я просто хочу, чтобы первый элемент нижнего колонтитула выровнялся по левому краю, а остальные - по правому. Спасибо, любая помощь или предложения будут полезны. Игнорировать thead и tbody, просто учтите tfoot.

Answer 1

Вы можете применить атрибут float, для которого принимаете right или left velues

.container {
  width: 100%;
  height: 100px;
  background-color: red;
}

.left {
  float: left;
  background-color: yellow;
}

.right {
  float: right;
  background-color: yellow;
}

<div class="container">
  <div class="left">Left Child</div>
  <div class="right">Right Child</div>
</div>

Так работает атрибут