td没有排队反对btn-group

Question

<td>中的文字未与btn-group上的<td>直接对齐（valign）。

参见示例：https://jsfiddle.net/rsf1f6wn/

如何解决这个问题？

<table id="myDataTable" class="table" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
      <th>Orders</th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr class="active">
      <td><a href="#">FirstName Lastame</a></td>
      <td>USA</td>
      <td>10</td>
      <td>
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-sm">Edit</button>
          <button type="button" class="btn btn-sm">Add</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要为以下课程提供vertical-align: middle：

.table thead>tr>th,
.table tbody>tr>th,
.table tfoot>tr>th,
.table thead>tr>td,
.table tbody>tr>td,
.table tfoot>tr>td {
  vertical-align: middle;
}

这也是一个特殊问题。因此，上面的代码可以使用正确的特异性来获取正确的元素。

小提琴：https://jsfiddle.net/9x0f7r3c/