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>

- Shehzad009

Answer 1

将<table>更改为<table style="float: left">

在最后一个</table>后添加<div style="clear: both"></div>。这是为了确保没有任何内容出现在第二个表格的右侧。

- 700 Software

---

有没有办法从您的方法中在两个表格之间留出一些空间？这两个表格相当接近。我想在它们之间留出一些空间。 - Shehzad009

将 style="float: left" 更改为 style="float: left; margin-left: 10px"。并将 10px 更改为您喜欢的任何值。 - 700 Software

Answer 2

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

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

- shanethehat

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移动到样式表中。祝好运。

- Karl Laurentius Roos

---

为了保持一致性，建议使用浮动块而不是浮动表格。 - Karl Laurentius Roos

它确实添加了两个无意义的元素。 - tdammers

Answer 4

如果您不需要支持 IE<8，您可以在表格上设置display: inline-block。这将使其外部的行为像内联元素，但内部的行为像块级元素。您还需要明确设置表格宽度以及包含块的宽度，除非您希望第二个表格在空间不足时出现在第一个表格下方。

- tdammers