两张桌子并排

Question

我是css的新手。我想并排放两张桌子。这就是我得到的。（使用bootstrap）

我想把'Pizza''表放在页面中间。我希望“比萨饼”桌上的另一张桌子右侧。

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

提前致谢

Answer 1

您想要将两个包装器都告诉inline-block

JS Fiddle

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