mehrere Tabellen in der gleichen Zeile

Question

Ich habe drei Tabellen, die alle in einem Div enthalten sind. Ich versuche, sie alle inline in die div zu bringen, aber sie zeigen jeweils auf ihrer eigenen Linie. Ich habe sie alle zur Anzeige gestellt: Inline auf Tabellenebene, aber das hat nicht funktioniert. Irgendwelche Ideen, wie mehrere Tabellen in derselben Zeile angezeigt werden?

<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

Versuchen Sie, sie in der CSS links zu schweben.

table { 
float:left; 
} 

Und stellen Sie sicher, dass die Breite der von ihnen Seite an Seite ist nicht größer als die von dort Container.

Answer 2

Sie können sie schweben:

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%; 
} 

Fiddle: http://jsfiddle.net/kboucher/6HuyW/

Answer 3

Sie wollen sie inline machen angezeigt werden, aber immer noch als Tabellen (sonst ihr Inhalt wird anonyme Tabellenblöcke erzeugen, die ein Wrapping verursachen.

display: inline-table; 

Answer 4

bei Temperaturen unter 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>