html两个表格水平对齐中心

Question

如何将两个表格并排放置？

我正在居中单桌，但我不能居中两张桌子，有一种简单的方法，但我不能，我怎样才能用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; 
 
}

<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

通过添加 '显示：直列表;' 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

添加text-align:center;身体或表的家长和display:inline-table;到.table-fill检查它全页视图。

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