HTML — Two Tables Horizontally Side by Side
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.
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.
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>