Django 并排显示 2 个表格

Question

正如标题所说，我正在尝试并排显示 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>

但它看起来像这样：

Tables look

我该如何解决这个问题？

Answer 1

您只需要更改桌子周围的 div。如果使用引导程序，则创建一个周围的行，然后将每个表设为一列。如果不使用引导程序，请参阅此页面以添加必要的 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>