Автоматическая ширина группы кнопок в таблице?

Question

У меня есть следующая таблица:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-responsive">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Pedro</td>
      <td>mk-567</td>
      <td>
        <div class="btn btn-group">
          <button type="button" class="btn btn-default btn-xs">
                        <i class="fa fa-search"></i>
                    </button>
          <button type="button" class="btn btn-default btn-xs">
                        <i class="fa fa-trash-o"></i>
                    </button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Как видите, col4 имеет большую ширину, я попытался установить width:auto, но он не работает, и если я вручную устанавливаю ширину, при изменении разрешения страницы это выглядит плохо, очень плохо. Я попытался установить значение width: 1px, но кнопки не переносят друг друга.

Есть ли способ "автоматической ширины" колонки для кнопок?