並排兩張桌子

Question

我是新來的CSS。我想把兩張桌子並排放在一起。這是我得到的。（使用引導）

我想在頁面中間放置'比薩'表。我想要'比薩'桌子右邊的其他桌子。

我的CSS：

.table2{ 

    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.table2 td{ 
    padding: 2px; 
} 

.table2 th{ 
    background-color: #d9534f; 
    padding: 2px; 
} 

.table3{ 
    width: 300px; 
    margin-left: auto; 
    margin-right: 60px; 
} 

.table3 td{ 
    padding: 2px; 
} 

.table3 th{ 
padding: 2px; 
} 

我的html：

<div class="table2"> 
    <h2>Table</h2> 

    <div class="table-borderless">   
    <table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Pizza's</th> 
     <th>-</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Margharita</td> 
     <td> $7.00 </td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 
</div> 

<div class="table3" > 
    <h2>Table</h2> 
    <div class="table-responsive">   
    <table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Totaal</th> 
     <th>-</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Margharita</td> 
     <td> $7.00 </td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 
</div> 

我成功了，當我一個浮動左等右，但是這不是我想要的。我想這也：提前

Answer 1

.table3{ 
    margin-left: 10px; 
    display: inline-block; 
} 

感謝您想告訴兩個包裝的是inline-block

JS Fiddle

.table2, .table3 {display: inline-block;}