Несколько таблиц на одной строке

У меня есть три таблицы, которые все содержатся в div. Я пытаюсь получить их во всех шоу inline в div, но каждый из них показывает свою линию. Я установил их для отображения: 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>

Ответ 1

Вы хотите, чтобы они отображали встроенные, но все же как таблицы (в противном случае их содержимое создаст анонимные блоки таблиц, которые вызовут обертку).

display: inline-table;

Ответ 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%;
}

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

Ответ 3

Попробуйте поместить их влево в css.

table {
 float:left;
}

И убедитесь, что ширина их бок о бок не больше, чем у контейнера.

Ответ 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>