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>