如何正确排列表格周围的元素

Question

请帮助css表和按钮。 我有design

现在我有了这个：my example

贝娄是我的HTML和CSS

＆＃13;

＆＃13;

table {
  border: 1px solid #00A1D4;
  margin-left: auto;
  margin-right: auto;
}

.plus_button {
  width: 80px;
  height: 80px;
  background-color: #FFBA5C;
  border: none;
  background-image: url("plus.png");
  background-repeat: no-repeat;
  background-position: center;
}

.minus_button {
  width: 80px;
  height: 80px;
  background-color: #881013;
  border: none;
  background-image: url("minus.png");
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<table id="myTable">
    <tr>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
      <td>
        <div class="cell"></div>
      </td>
    </tr>

  </table>
  <button onclick="appendCol()" class="plus_button"></button>
  <button onclick="deleteRow()" class="minus_button"></button>
  <button onclick="appendRow()" class="plus_button"></button>
  <button onclick="deleteCol()" class="minus_button"></button>

＆＃13;

＆＃13;

＆＃13;

注意：表是动态的，在单击加号和减号按钮期间，我可以添加行和列，但表始终应位于中心。

我绑了浮动并显示，位置。结果始终 - 表格移至左侧

提前谢谢！