How to prevent my td stacking below each other?

Question

I am trying to make a table responsive when the screen size gets smaller. It is a table-responsive class inside a col-6, but when the screen gets smaller, the td's and th's get stacked below each other.. I want the table to get smaller, or just wider in some way.

I tried some bootstrap responsive classes, but on a table it seems to be quite hard.

<div class="col-6 col-lg-6 col-xl-6">
   <div class="table-responsive">
      <table class="table">
         <thead>
           <tr>
             <th>Dealtype</th>
             <th>Start date</th>
             <th>End date</th>
             <th>Investment</th>
             <th>Price per review</th>
             <th>Logistics costs</th>
             <th>#Reviews</th>
           </tr>
         </thead>

         <tbody>
            <tr>
              <td>{{ $deal->dealtype }}</td>
              <td>{{ $deal->startdate }}</td>
              <td>{{ $deal->enddate }}</td>
              <td>€ {{ number_format(round($deal->amount, 2), 2) }}</td>
              <td>€ {{ number_format(round($deal->reviewprice, 2), 2) }}</td>
              <td>€ {{ number_format(round($deal->logisticsamount, 2), 2) }}</td>
              <td> {{ $deal->quantity }}</td>
            </tr>
          </tbody>
       </table>
   </div>
</div>

I expect the table width to resize with the screen, but obviously the col-6 makes the content stack below each other.

here is a picture of the problem