Html 同一行上的多个表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13425037/
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
multiple tables on same line
提问by Skitterm
I have three tables that are all contained in a div. I am trying to get them to all show inline in the div, but they each show on their own line. I set them all to display: inline at the table level, but this didn't do the trick. Any ideas of how to get multiple tables to show on the same line?
我有三个表都包含在一个 div 中。我试图让它们在 div 中全部显示内联，但它们每个都显示在自己的行上。我将它们全部设置为 display: inline 在表级别，但这并没有奏效。关于如何让多个表显示在同一行上的任何想法？
<div id="container">
<table id="previous-arrow" class="scroll">
<tr>
<td><a href="#" id="nav-prev"><span>Previous</span></a></td>
</tr>
</table>
<table id="tour-carousel">
<tr id="carousel-row">
<td>data here</td>
</tr>
</table>
<table id="next-arrow" class="scroll">
<tr>
<td><a href="#" id="nav-next"><span>Next</span></a></td>
</tr>
</table>
</div>
回答by Quentin
You want to make them display inline, but still as tables (otherwise their content will create anonymous table blocks which cause wrapping).
您想让它们内联显示，但仍作为表格显示（否则它们的内容将创建导致换行的匿名表格块）。
display: inline-table;
回答by Kevin Boucher
You can float them:
你可以浮动它们：
HTML
HTML
<div class="container">
<table><tr><td>Table 1</td></tr></table>
<table><tr><td>Table 2</td></tr></table>
<table><tr><td>Table 3</td></tr></table>
</div>
CSS
CSS
table {
float:left;
width:33%;
}
回答by Christopher Marshall
Try to float them left in the css.
尝试将它们浮动在 css 中。
table {
float:left;
}
And make sure the width's of them side-by-side isn't greater than that of there container.
并确保它们并排的宽度不大于容器的宽度。
回答by Abhishek Jaiswal
USE BELOW CODE
使用以下代码
<div id="container">
<table id="previous-arrow" class="scroll" **style="float:left"**>
<tr>
<td><a href="#" id="nav-prev"><span>Previous</span></a></td>
</tr>
</table>
<table id="tour-carousel" **style="float:left"**>
<tr id="carousel-row">
<td>data here</td>
</tr>
</table>
<table id="next-arrow" class="scroll" **style="float:left"**>
<tr>
<td><a href="#" id="nav-next"><span>Next</span></a></td>
</tr>
</table>
</div>
