HTML — Two Tables Horizontally Side by Side

Solution 1:

This answer is taken from Chris Baker's answer of a duplicate question. Please up vote his answer.

One can use float: left or display: inline-block depending on content and space:

<table style="display: inline-block">

<table style="float: left">

This page is already setup with the HTML to try out and see how it looks in the browser: http://jsfiddle.net/SM769/

Documentation

CSS display on MDN - https://developer.mozilla.org/en/CSS:display
CSS float on MDN - https://developer.mozilla.org/en/CSS/float

Example

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

Solution 2:

I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:left to the CSS of the first fieldset.

Solution 3:

try to add to your CSS file:

.table-wrapper {
    display:inline-flex;
}

I have tried with display: inline-table, with float: left, and other stuff, but not a single one worked for me.

Solution 4:

Add:

fieldset
{
    float: left;
}

to your CSS. I copied your HTML to http://jsfiddle.net/S3n6D/ and added that CSS. You can see the result there.

Solution 5:

You have to apply a CSS rule to your tables in order to follow the normal document float which is:

table{ float:left; }

<table style="float: left;">.........</table>

PS: Just make sure that this tag selector block won't affect any other tables that you don't them to be so, otherwise you are recommended to use ID or class selectors.