divの1つまたは2つのテーブル

Question

私はお互いの隣に1つか2つのテーブルのdivを表示しようとしています。テーブルは中央にする必要があります。私は今のところ、それに対する適切なCSSを見つけることができなかった

<div class="all"> 
    <div class="row"> <!-- row with 1 table in it --> 
    <div class="column"> 
     <table class="centered"> 
      ... 
     </table> 
    </div> 
    </div> 

    <div class="row"> <!-- row with 2 tables in it --> 
    <div class="column"> 
     <table class="centered"> 
      ... 
     </table> 
    </div> 
    <div class="column"> 
     <table class="centered"> 
      ... 
     </table> 
    </div> 
    </div> 

</div> 

：

 
*div**************************************************************************** 
*          Table 1         * 
*         |...|...|...|        * 
******************************************************************************** 
*div**************************************************************************** 
*     Table 2        Table 3    * 
*     |...|...|...|      |...|...|...|   * 
******************************************************************************** 

は私のHTMLは次のようになります。私の現在のCSSは次のようになります。

div.row { 
    display: block; 
    width: 100%; 
} 

div.column { 
    display: inline; 
    margin-left: auto; 
    margin-right: auto; 
} 

table.centered { 
    border: 1px; 
    border-style: solid; 
    margin: 20px; 
} 

jsfiddleはここにある：jsfiddle

これはあなたが探していたものですが、ここフィドルであれば...私はCSSを理解

Answer 1

使用フレキシボックスを与え、それはあなたがそれぞれの行に追加する方法の列に関係なく動作します：

.row { 
    display: flex; 
    justify-content: center; 
} 

jsfiddle

Answer 2

わからない助けてください私が投稿しました。私はtable.centralered float:left;を作って、.leftと。を追加しました。右第一及び第三のボックスのクラスと単純には彼らにmargin-top:100px;

https://jsfiddle.net/k9w7yt0f/1/

Answer 3

を

フレックスボックス（旧式のブラウザと互換性がない）を使用しない場合は、columnからdisplay: inline;を消去し、text-align: center;を追加して0を追加してください.centeredに：

（インライン要素はそのコンテナ上text-align: center;を使用して中心にすることができます）

div.row { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
div.column { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 

 
table.centered { 
 
    border: 1px; 
 
    border-style: solid; 
 
    margin: 20px; 
 
    display: inline-table; 
 
}

<div class="all"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <table class="centered"> 
 
     <thead> 
 
      <tr> 
 
      <th>Header 1</th> 
 
      <th>Header 2</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="column"> 
 
     <table class="centered"> 
 
     <thead> 
 
      <tr> 
 
      <th>Header 1</th> 
 
      <th>Header 2</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      </tr> 
 
      <tr> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      </tr> 
 
      <tr> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 

 
     <table class="centered"> 
 
     <thead> 
 
      <tr> 
 
      <th>Header 1</th> 
 
      <th>Header 2</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      </tr> 
 
      <tr> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      </tr> 
 
      <tr> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/pLccg6w3/