Align tables next to eachothers

Question

I have a loop which generates tables according to a database content. In other words, the content is changed all the time.

Currently all tables are aligned beneath eachother. This makes one huge vertical scroll, I would save alot of space if the tables could be aligned next to eachother.

How can I do so?

Here is the table code:

$display="<table align='left'>
                <tr>
                    <td>Found $tot_rows records
                    </td>
                </tr>";
            foreach ($results->response->docs as $doc)
            {
                $display.="<tr>
                        <td align='center'><table align='left' class='table_bg'><tr><td>FIELD NAME</td><td>VALUE</td></tr>";
                foreach ($doc as $field => $value)
                {       
                    $display.= "
                    <tr>
                    <td>".htmlspecialchars($field, ENT_NOQUOTES, 'UTF-8')."</td>
                    <td>".htmlspecialchars($value, ENT_NOQUOTES, 'UTF-8')."</td>
                    </tr>";
                }
                $display.="</table></td></tr>";
            }
         }// end if $results
        $display.="</table>";

Thanks

Answer 1

Put each table in cells ("td"-s inside one "tr") of one big outer table?

Answer 2

Add a class to your table:

<table class="sidebyside" align="left">

And add the CSS:

.sidebyside {float:left;}

(Updated for the arguments/comments of mighty mm)

Answer 3

Put each table into a div like this:

<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>

Then, in your CSS:

<style>
...
.tables {
   float: left;
   display: inline-block;
}
...
</style>