Django отображает 2 таблицы рядом друг с другом

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

На данный момент это код 2 таблиц:

<div>
   <table style="float: left" class="table table-striped table-bordered table-sm">
       {% for item in product %}
           {% if item.orden_ref_id == orden.id %}
               <tr>
                   <td>
                      {{ item.articulo }}
                   </td>
               </tr>
           {% endif %}
       {% endfor %}
   </table>
   <table style="float: right" class="table table-striped table-bordered table-sm">
       {% for item in valor %}
           {% if item.refer_id == orden.id %}
               {% if item.show_ref == '2' %}
                   <tr>
                       <td>
                           {{ item.costo }}
                       </td>
                   </tr>
               {% endif %}
           {% endif %}
        {% endfor %}
   </table>
</div>

но это выглядит так:

Таблицы выглядят

Как я могу решить эту проблему?

Вам просто нужно изменить div'ы вокруг таблицы. Если вы используете bootstrap, то сделайте окружающую строку, а затем сделайте каждую таблицу столбцом. Если не используете bootstrap, то смотрите эту страницу для добавления необходимого CSS, https://www.w3schools.com/howto/howto_css_two_columns.asp

<div class = "row">
<div class = "col">
   <table  class="table table-striped table-bordered table-sm">
       {% for item in product %}
           {% if item.orden_ref_id == orden.id %}
               <tr>
                   <td>
                      {{ item.articulo }}
                   </td>
               </tr>
           {% endif %}
       {% endfor %}
   </table>
</div>
<div class = "col">
   <table  class="table table-striped table-bordered table-sm">
       {% for item in valor %}
           {% if item.refer_id == orden.id %}
               {% if item.show_ref == '2' %}
                   <tr>
                       <td>
                           {{ item.costo }}
                       </td>
                   </tr>
               {% endif %}
           {% endif %}
        {% endfor %}
   </table>
<div class = "col">
</div>
Вернуться на верх