text-overflow: ellipsis;

а это разве не скроет текст, который не влезает?

В этом случае получится, что содержимое в ячейке ты не сможешь прочитать полностью

.table {
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    .table thead tr th {
      background: rgb(44, 62, 88);
      color: white;
    }
    .table th, .table td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
      white-space: normal;
      font-size: 14px;
      color: #000;
    }
    
    .table thead tr th:first-child {
      border-top-left-radius: 8px;
    }
    .table thead tr th:last-child {
      border-top-right-radius: 8px;
    }
    .table tbody tr:last-child td:first-child {
      border-bottom-left-radius: 8px;
    }
    .table tbody tr:last-child td:last-child {
      border-bottom-right-radius: 8px;
    }

Для примера:

<div class="table-responsive">
    <table class="table">
       // Таблица
    </table>
</div>

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    margin: 20px 0;
}

.table {
    border-radius: 8px;
    border-spacing: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    display: block;
    max-width: -moz-max-content;
    max-width: max-content;
    overflow: hidden;
    overflow-x: auto;
    table-layout: fixed;
    white-space: nowrap;
}

Топорно, но работает.
Единственное на мобилке в таком варианте если таблица находится внутри блока display:grid может возникать проблема со сдвигом.

А решается это очень просто, в мобилке просто где внутри блока с гридом лежит таблица делаем display: block; :

.grid {
    display: block;
}

@media (min-width: 552px) {
    .grid {
      display: grid;
    }
}