同一行上的多个表

我有三个表都包含在一个div中。我试图让他们都在内联展示div，但他们每个都显示在他们自己的线上。我将它们都设置为显示：在表格级别内联，但这并没有成功。有关如何让多个表显示在同一行上的任何想法？同一行上的多个表

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

来源

2012-11-16 Skitterm

您可以发布您的代码？ – j08691

像'floating：left'可能吗？ – Leron

试着把它们留在css左边。

table { 
float:left; 
}

并确保它们并排的宽度不会大于容器的宽度。

来源

2012-11-16 22:02:47

你可以把它们飘浮：

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

table { 
    float:left; 
    width:33%; 
}

小提琴：http://jsfiddle.net/kboucher/6HuyW/

来源

2012-11-16 22:03:14

我试过了，但它仍然在多行上。也许其他的CSS问题正在挤入。 – Skitterm

你可以发布你的CSS吗？ –

你想让他们在线显示，但仍表（否则他们的内容将创建导致包装的匿名表格块）。

display: inline-table;

来源

2012-11-16 22:04:36 Quentin

使用下面的代码

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

来源

2016-10-17 06:23:19

同一行上的多个表

回答

相关问题