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>之后。这是为了确保没有任何内容出现在第二个表的右侧。

Answer 2

将两个表设置为具有固定宽度，然后使用CSS浮动它们：

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

Answer 3

这样的事情应该有效：

<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应用于生产，则应将CSS移动到样式表中。祝你好运。

Answer 4

如果您不必支持IE＆lt; 8，则可以在表格上设置display: inline-block。这将使它们在外部表现为内联元素，但在内部表现为块级元素。您还需要显式设置表格宽度以及包含块的宽度，除非您希望第二个表格在没有足够空间时弹出第一个表格。

html问题想要在另一个旁边移动一个表

4 个答案: