并排放置三个 html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24000788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place three html tables side by side
提问by Trung Tran
Can someone help me with placing three tables side by side? All of my current tables are stacked top to bottom. Here is my code below:
有人可以帮我并排放置三张桌子吗？我目前所有的桌子都是从上到下堆叠的。这是我的代码如下：
<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
回答by service-paradis
First, you will need to close correctly your tabletags like this
首先，您需要table像这样正确关闭标签
</table>
Second, tableis a block element, so you will need to specify display:inline-blockin table style like this:
其次，table是一个块元素，因此您需要display:inline-block在表格样式中指定如下：
<table style="width:30%;display:inline-block">
回答by Surajit Majumdar
Adding a little bit of CSS will do the trick. Close you table properly </table>. Start your table with <table style="display: inline-block;" width="auto">.
添加一点 CSS 就可以解决问题。正确关闭你的桌子</table>。用 开始你的桌子 <table style="display: inline-block;" width="auto">。
回答by Surreal Dreams
You can apply float: left;to your table styling. This will attempt to place them side by side, though if there is not enough room horizontally they will stack. This can happen if the table content forces the table to wider than the 30% you set. Here's the simple CSS for this:
您可以应用float: left;到您的表格样式。这将尝试将它们并排放置，但如果水平方向没有足够的空间，它们将堆叠。如果表格内容强制表格宽度超过您设置的 30%，就会发生这种情况。这是用于此的简单 CSS：
table {
float: left;
}
Add that inside style tags or a .css file. It's better practice to avoid applying styles directly in your HTML.
将其添加到样式标签或 .css 文件中。最好避免直接在 HTML 中应用样式。
回答by ZeroWorks
The solution is floating tables:
解决方案是浮动表：
<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>
But i suggest you to use divs instead of tables and remove inline styles...
但我建议您使用 div 而不是表格并删除内联样式...
