0

有人可以帮我并排放置三张桌子吗？我目前所有的表格都是从上到下堆叠的。下面是我的代码：

<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
4

4 回答 4

3

首先，您需要table像这样正确关闭标签

</table>

其次，table是一个块元素，所以你需要display:inline-block像这样在表格样式中指定：

<table style="width:30%;display:inline-block">
于 2014-06-02T18:20:20.997 回答
0

您可以应用float: left;到您的表格样式。这将尝试将它们并排放置，但如果水平空间不足，它们将堆叠。如果表格内容强制表格比您设置的 30% 更宽，就会发生这种情况。这是用于此目的的简单 CSS：

table {
    float: left;
}

将其添加到样式标签或 .css 文件中。最好避免在 HTML 中直接应用样式。

于 2014-06-02T18:18:03.933 回答
0

解决方案是浮动表：

<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 而不是表格并删除内联样式...

于 2014-06-02T18:18:48.417 回答
0

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

于 2014-11-20T10:06:44.110 回答