同じ行に複数のテーブルがあります

Question

私はすべてが1つのdivに含まれる3つのテーブルを持っています。私は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> 

Answer 1

cssの左側に浮かせてください。

table { 
float:left; 
} 

これらの横の幅がコンテナの幅より大きくないようにしてください。

Answer 2

あなたはそれらをフロートすることができます

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/

Answer 3

それらのコンテンツはラッピングを引き起こす匿名のテーブルブロックを作成します）。コードの下

display: inline-table; 

Answer 4

使用は

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