3つのhtmlテーブルを並べて中央に並べる方法

Question

私はhtmlで以下のコードを用意しています。

各テーブルを中央に合わせてみましたが、動作しませんでした。私はまだテーブルが中心になっていない中心に整列されてdivタグを使用しています。すべてのヘルプしてください

<div align="center"> 
<table border='1' style="border-color: white;float:left; width:25%"> 
<tr> 
    <th colspan="2">Row 1</td>   
</tr> 
<tr> 
    <td>Row 2</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 3</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 4</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 5</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 6</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 7</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 8</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 9</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 10</td> 
    <td>Dummy Data</td> 
</tr> 
</table> 
<table border='1' style="border-color: white;float:left; width:25%"> 
<tr> 
    <th colspan="2">Row 1</td>   
</tr> 
<tr> 
    <td>Row 2</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 3</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 4</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 5</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 6</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 7</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 8</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 9</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 10</td> 
    <td>Dummy Data</td> 
</tr> 
</table> 
<table border='1' style="border-color: white;float:left; width:25%"> 
<tr> 
    <th colspan="2">Row 1</td> 

</tr> 
<tr> 
    <td>Row 2</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 3</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 4</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 5</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 6</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 7</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 8</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 9</td> 
    <td>Dummy Data</td> 
</tr> 
<tr> 
    <td>Row 10</td> 
    <td>Dummy Data</td> 
</tr> 
</table> 
</div> 

Answer 1

あなたが好きflexボックスのアプローチを使用することができます `grid`を中央の種類、センターを意味

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

<div class="center"> 
 
<table border='1' class="table" style="border-color: white;float:left; width:25%"> 
 
<tr> 
 
    <th colspan="2">Row 1</td>   
 
</tr> 
 
<tr> 
 
    <td>Row 2</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 3</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 4</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 5</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 6</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 7</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 8</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 9</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 10</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
</table> 
 
<table id="mainTable2" border='1' class="table" style="border-color: white;float:left; width:25%"> 
 
<tr> 
 
    <th colspan="2">Row 1</td>   
 
</tr> 
 
<tr> 
 
    <td>Row 2</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 3</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 4</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 5</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 6</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 7</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 8</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 9</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 10</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
</table> 
 
<table id="mainTable3" border='1' class="table" style="border-color: white;float:left; width:25%"> 
 
<tr> 
 
    <th colspan="2">Row 1</td> 
 

 
</tr> 
 
<tr> 
 
    <td>Row 2</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 3</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 4</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 5</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 6</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 7</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 8</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 9</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 10</td> 
 
    <td>Dummy Data</td> 
 
</tr> 
 
</table> 
 
</div>