Кнопки не расширяются, чтобы заполнить ячейку таблицы

Question

Я использую Bootstrap 4 и пытаюсь поместить кнопки в ячейку таблицы для каждой строки. Но кнопки не расширяются, чтобы заполнить область. Они кажутся раздавленными. Когда я сижу на мобильном телефоне, происходит то же самое.

Как видно из скриншота, в ячейке действий достаточно места. Но кнопки повреждены.

Кто-нибудь может увидеть, что я делаю не так?

<table class="table table-striped small">
  <thead>
    <tr>

      <th>Status</th>
      <th class="d-none d-sm-table-cell">Tax ID</th>
      <th class="d-none d-sm-table-cell">Contractor ID</th>
      <th class="d-none d-sm-table-cell">Account</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Unregistered</td>
      <td class="d-none d-sm-table-cell">123456789</td>
      <td class="d-none d-sm-table-cell">4113223</td>
      <td class="d-none d-sm-table-cell">N/A</td>
      <td class="text-center bg-danger">
        <a href="#" class="btn btn-info  text-white"><i class="fas fa-vial d-none d-sm-none d-md-block"></i> <span class="d-none d-sm-none d-md-block">Create</span> Test Call</a>
        <a href="#" class="btn btn-success   text-white"><i class="fas fa-sign-in-alt d-none d-sm-none d-md-block"></i> LogIn</a>
        <a href="#" class="btn btn-danger  text-white"><i class="fas fa-sign-out-alt d-none d-sm-none d-md-block"></i> LogOut</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

попробуйте добавить btn-block класс CSS к каждой из ваших кнопок.

<a href="#" class="btn btn-info btn-block text-white"><i class="fas fa-vial d-none d-sm-none d-md-block"></i> <span class="d-none d-sm-none d-md-block">Create</span> Test Call</a>

Answer 2

Ответ: display: block.Для элементов привязки по умолчанию установлено значение inline.

С MDN :

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправонасколько это возможно).