3 html tablolarını ortalamak, yan yana hizalamak

Aşağıdaki kodu html dosyasında ortalamam gerekiyor;3 html tablolarını ortalamak, yan yana hizalamak

Her bir tabloyu hizalamaya çalıştım, işe yaramadı. Merkeze hizalanmış div etiketi kullanıyorum, masalar ortalanmıyor. Sen gibi flex kutu yaklaşımı kullanabilirsiniz

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

kaynak

2016-03-23 Joshi

, merkez 'grid' merkezinin ne tür demek? – mmativ

, sayfanın, ilk olarak sayfanın% 12.5'i, tablo1 için sonraki% 25'i, tablo 2 için sonraki% 25'i, tablo 3'ün yanında ve% 12.5'i tekrar boş olarak kalacak şekilde doldurulması anlamına gelir. – Joshi

lütfen Herhangi bir yardım:

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

kaynak

2016-03-23 07:53:19

3 html tablolarını ortalamak, yan yana hizalamak

cevap

İlgili konular