在html表中的tr中心tds（Bootstrap）

Question

我想创建一个每行中具有不同列数的表，并使这些列居中以使其看起来很好。

我现在有什么：

我想要的是什么：

每个红色方块都有一个按钮。

这是否可以使用桌子？

我尝试为每一行制作一张不同的表，但每张表之间的间距很大，所以看起来并不好看。

我正在使用Bootstrap表。

这是html代码：

<table class="table table-condensed">
<tbody>
  <tr>
    <th>
      <button href="#" class="btn btn-default btn-sm" id="filled">Mark</button>
    </th>
    <th>
      <button href="#" class="btn btn-default btn-sm" id="empty">Unmark</button>
    </th>
    <th>
      <button href="#" class="btn btn-default btn-sm" id="unknown">Unknown</button>
    </th>
  </tr>
  <tr>
    <td>
      <a href="#" class="btn btn-default btn-sm" id="undo">Undo</a>
    </td>
    <td><a href="#" class="btn btn-default btn-sm" id="redo">redo</a></td>
  </tr>
</tbody>
</table>