Ein oder zwei Tabellen zentriert in einem div

Question

Ich versuche, divs mit entweder einem oder zwei Tabellen nebeneinander anzuzeigen. Die Tabellen sollten zentriert werden:

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

Meine html etwas wie folgt aussieht:

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

Ich habe bisher nicht die richtige CSS für sie zu finden. Meine aktuelle CSS sieht wie folgt aus:

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 ist hier: jsfiddle

Bitte helfen Sie mir CSS zu verstehen ...

Answer 1

Verwendung Flexbox und es wird funktionieren, egal, wie Spalten, die Sie in jeder Zeile hinzufügen:

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

jsfiddle

Answer 2

Nicht sicher, ob dies ist, was Sie suchen, aber hier ist eine Geige Ich habe gepostet. Ich machte table.centered float:left; und fügte dann ein .left hinzu und. richtige Klasse für das erste und das dritte Feld und einfach gab ihnen eine margin-top:100px;

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

Answer 3

Wenn Sie die Flexbox nicht verwenden möchten (nicht kompatibel mit älteren Browsern), löschen Sie die display: inline; von column, fügen Sie text-align: center; hinzu und fügen Sie auch 0 hinzu-.centered:

(Inline-Elemente zentriert werden kann text-align: center; auf ihrem Behälter mit)

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/