并排放置三个html表

Question

有人可以协助我并排放置三张桌子吗？我所有当前的表都是从上到下堆叠的。这是我的代码如下：

<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table
<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
 </table
<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table

Answer 1

首先，你需要正确关闭你的table标签

</table>

其次，table是一个块元素，因此您需要在表格样式中指定display:inline-block，如下所示：

<table style="width:30%;display:inline-block">

Answer 2

您可以将float: left;应用于您的桌面造型。这将尝试将它们并排放置，但如果没有足够的空间，它们将堆叠。如果表内容强制表格宽于您设置的30％，则会发生这种情况。这是简单的CSS：

table {
    float: left;
}

添加内部样式标记或.css文件。最好避免在HTML中直接应用样式。

Answer 3

解决方案是浮动表：

<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>
<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>
<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>

但我建议你使用div而不是表格并删除内联样式...

Answer 4

添加一点CSS就可以了。正确关闭你的桌子</table>。用<table style="display: inline-block;" width="auto">开始你的桌子。