multiple tables on same line

Question

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

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;

Answer 2

You can float them:

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/