css - Div テーブル フロート

Question

内部に3つのテーブルがあるこのようなdivタグがあります。

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

出力は


ABC ABC
XYZ XYZ
LMN LMN


どうすればこのようなものに変更できますか?

ABC ABC         XYZ XYZ       LMN LMN

Answer 1

それらはデフォルトでブロックレベルであり、インラインにします。

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

例

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

@ j08691で提案されているように、それらをフロートにすることもできます

table { float: left }

Answer 2

このjsFiddleの例のように、テーブルを左にフロートさせ、右側にマージンを設定できます

​table{
    float:left;
    margin-right:80px;
}