Отображение содержимого внутри таблицы начальной загрузки

У меня есть таблица Bootstrap 4, в которой отображается информация о денежной стоимости, но у меня проблема с отображением в адаптивном режиме, и я подробно описываю свою проблему:

У меня есть следующий код HTML:

<div class = "table-responsive">
 <table class = "table table-hover">
   <thead>
     <tr>
       <th scope = "col">#</th>
       <th scope = "col">First</th>
       <th scope = "col">Last</th>
       <th scope = "col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope = "row">1</th>
        <td>$ 1,543,3345,432</td>
        <td>$ 1,456,334,4545</td>
        <td>$ 1,000,0202</td>
      </tr>
    </tbody>
   </table>
</div>

На ПК отображается отлично:

Но в режиме ответа появляется проблема:

Я хочу, чтобы в адаптивном режиме он выглядел как компьютер. Я пробовал несколько способов изменить CSS, чтобы получить это, но не смог.

Большое спасибо!