html 2つのテーブルを水平に配置する

Question

どのように2つのテーブルを並べることができますか？

私は1つのテーブルをセンタリングしていますが、2つのテーブルを中央に配置することはできませんでした。単純な方法がありますが、できませんでした。

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); 
 
body { 
 
    background-color: #FFFFFF; 
 
    font-family: "Roboto", helvetica, arial, sans-serif; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
/*** Table Styles **/ 
 

 
.table-fill { 
 
    background: white; 
 
    border-radius: 3px; 
 
    border-collapse: collapse; 
 
    height: 120px; 
 
    max-width: 400px; 
 
    padding: 5px; 
 
    width: 100%; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
 
    animation: float 5s infinite; 
 
}

<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-right">Val1</td> 
 
     <td class="text-center">a</td> 
 
     <td class="text-left">%</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-center">AÇILAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="text-center">KALAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

を添加することにより次のよう

私のコードは、 '表示：インラインテーブルを;'あなたの.tableフィルCSSクラスにCSS、あなたの問題を解決することがあり

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); 
 
body { 
 
    background-color: #FFFFFF; 
 
    font-family: "Roboto", helvetica, arial, sans-serif; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
/*** Table Styles **/ 
 

 
.table-fill { 
 
    background: white; 
 
    border-radius: 3px; 
 
    border-collapse: collapse; 
 
    height: 120px; 
 
    max-width: 400px; 
 
    padding: 5px; 
 
    width: 100%; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
 
    animation: float 5s infinite; 
 
    display:inline-table; 
 
}

<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-right">Val1</td> 
 
     <td class="text-center">a</td> 
 
     <td class="text-left">%</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-center">AÇILAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="text-center">KALAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

は、フルページビューでそれを確認.table-fillに体またはテーブルの親とdisplay:inline-table;にtext-align:center;を追加しました。

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); 
 
body { 
 
    background-color: #FFFFFF; 
 
    font-family: "Roboto", helvetica, arial, sans-serif; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    text-rendering: optimizeLegibility; 
 
    text-align:center; 
 
} 
 
/*** Table Styles **/ 
 

 
.table-fill { 
 
    background: white; 
 
    border-radius: 3px; 
 
    border-collapse: collapse; 
 
    height: 120px; 
 
    max-width: 400px; 
 
    padding: 5px; 
 
    width: 100%; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
 
    animation: float 5s infinite; 
 
    display: inline-table; 
 
}

<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-right">Val1</td> 
 
     <td class="text-center">a</td> 
 
     <td class="text-left">%</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table-fill" style="" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-left">1</th> 
 
     <th class="text-left">2</th> 
 
     <th class="text-left">3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="table-hover"> 
 
    <tr> 
 
     <td class="text-center">AÇILAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="text-center">KALAN SANDIK</td> 
 
     <td class="text-left">1</td> 
 
     <td class="text-left">1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>