Bootstrap фиксированный контент в таблице

Question

Как я могу исправить содержимое таблицы при загрузке?Мой код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accounts">
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th>Аккауты ВК</th>
        <th>Количество</th>
        <th>Цена</th>
        <th></th>
      </tr>
      <tr>
        <td>
          <div class="icon float-left mr-2">
            <i class="fab fa-vk"></i>
          </div>
          <p>
            Аккаунты Instagram | Зарегистрированы с MIX ip.
          </p>
        </td>
        <td>
          1230 шт.
        </td>
        <td>
          <del class="text-danger">950 руб.</del> 920 руб. <span class="text-muted">/ 1 шт.</span>
        </td>
        <td class="text-right">
          <a href="" class="w-100 btn btn-success btn-sm">
            <i class="fas fa-shopping-cart"></i> Купить
          </a>
        </td>
      </tr>
    </table>
  </div>
</div>

У меня есть адаптивная таблица, но когда я вижу эту таблицу на своем телефоне, текст этой таблицы очень маленький и разрывается на следующей строке.Как я могу сделать фиксированный контент в таблице?И только на мобильных телефонах с прокруткой?