Question

i have div tag like this with 3 tables inside.

<div>
    <table>
        <tr><td>ABC</td><td>ABC</td></tr>
    </table>


    <table>
        <tr><td>XYZ</td><td>XYZ</td></tr>
    </table>

     <table>
        <tr><td>LMN</td><td>LMN</td></tr>
    </table>

</div>

The output is

ABC ABC
XYZ XYZ
LMN LMN


How can I change to something like this?

ABC ABC         XYZ XYZ       LMN LMN

Answer 1

They are block level by default, make them inline.

• https://developer.mozilla.org/en-US/docs/CSS/display
• http://jsfiddle.net/3W8bb/

Example

table {
  display: inline-block;
  /** this works too */
  display: inline-table
}​

You can also make them float, as suggested by @j08691

table { float: left }