HTML вопрос хотите переместить таблицу рядом с другой

Question

У меня есть две таблицы. Один над другим. Я хочу переместить нижний стол справа от верхнего стола. Прямо сейчас, когда я запускаю сервер, верхняя таблица располагается над нижней таблицей. Есть ли способ переместить нижний стол справа от верхнего стола?

<table>
        <tr><th>Type</th><th>Quantity</th></tr>
        </tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
        </tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
</tables>

<table>
        <tr><th></th><th>Status</th><th>Quantity</th></tr>
        <tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
        <tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
        <tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
</table>

Answer 1

Изменить <table> на <table style="float: left">

После последнего </table> добавить <div style="clear: both"></div>. Это сделано для того, чтобы убедиться, что ничто не идет справа от таблицы second .

Answer 2

Установите обе таблицы на фиксированную ширину, а затем разместите их с помощью CSS:

table { float:left; width:400px; }

Answer 3

Если вам не нужно поддерживать IE <8, вы можете установить <code>display: inline-block для таблиц.Это заставит их вести себя как встроенные элементы снаружи, но как элементы уровня блока внутри.Вы также захотите явно установить ширину таблицы, а также ширину содержащего блока, если только вы не хотите, чтобы вторая таблица появлялась ниже первой, когда не хватает места.

Answer 4

Что-то вроде этого должно работать:

<div style="width: 400px;">

    <div style="width: 200px; float: left;">

        <table>
                <tr><th>Type</th><th>Quantity</th></tr>
                </tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
                </tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
        </tables>

    </div>

    <div style="width: 200px; float: left;">

        <table>
                <tr><th></th><th>Status</th><th>Quantity</th></tr>
                <tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
                <tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
                <tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
        </table>

    </div>

    <div style="clear: both;"></div>

</div>

Вместо этого вы должны переместить CSS в таблицу стилей, если вы примените это к производству.Удачи.