html - 两张 table 并排

我是CSS的新手。我想并排放置两张桌子。这就是我得到的。（使用引导程序）

我想将“比萨饼”表放在页面中间。我想要“ Pizza's”桌子的另一张桌子右边。

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

当我一个人向左浮动，另一个人向右浮动时，我成功了，但这不是我想要的。我也尝试过这个：

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

提前致谢

最佳答案

您想告诉两个包装器均为inline-block

JS Fiddle

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