bootstrap - таблица не может быть выровнена вправо - PullRequest
Новая
       5

bootstrap - таблица не может быть выровнена вправо

0 голосов
/ 23 марта 2020

Я пытаюсь выровнять свою таблицу по праву от моей страницы счета-фактуры следующим образом:

enter image description here

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

Ниже приведен мой код: 

 <div class="row">

      <div class="col-4 col-md-4 col-sm-5 " >
        <table class="table table-bordered ">
        <th><strong> Payment Received </strong></th>
        <tbody>
          <tr style="page-break-after: always;">
            <td class="left">
              Payment Method: xxxxxx
            </td>       
          </tr>
          <tr>
            <td class="left">
              Reference No: 2192012
            </td>       
          </tr>
          <tr>
            <td class="left">
              Amount Paid: RM10,000.00 
            </td>       
          </tr>
          <tbody>
     </table>
 <div>

    <div class="col-4 col-md-4 col-sm-5 mr-auto ">
        <table class="table table-clear">
        <tbody>
        <tr>
        <td class="left">
        <strong>Subtotal</strong>
        </td>
        <td class="right">8.497,00</td>
        </tr>
        <tr>
        <td class="left">
        <strong>Transportation(Klang Valley)</strong>
        </td>
        <td class="right">1,699,40</td>
        </tr>
        <tr>
        <td class="left">
         <strong>Transportation(Outstation)</strong>
        </td>
        <td class="right">679,76</td>
        </tr>
        <tr>
        <td class="left">
        <strong> Grand Total</strong>
        </td>
        <td class="right">
        <strong>7.477,36</strong>
        </td>
        </tr>
        <tr>
          <td class="left">
          <strong> Discount</strong>
          </td>
          <td class="right">
          20%
          </td>
          </tr>
          <tr>
            <td class="left">
            <strong> Amount Paid</strong>
            </td>
            <td class="right">
            7.477,36
            </td>
            </tr>
            <tr>
              <td class="left">
              <strong> Balance Due</strong>
              </td>
              <td class="right">
              <strong>7.477,36</strong>
              </td>
              </tr>
        </tbody>
        </table>

        </div>
      </div>

Я не уверен, почему он не выровнялся по правому краю, поскольку они разделить одну и ту же строку Что я сделал не так?

1 Ответ

3 голосов
/ 23 марта 2020

Проблемы

  1. <div> неправильно закрыты
  2. Используйте ml-auto вместо mr-auto

Рабочая демоверсия

https://www.codeply.com/p/86T67T7NFV

...