html - 如何防止我的 td 堆叠在彼此下方？

Question

当屏幕尺寸变小时，我试图让表格响应。它是 col-6 内的一个表响应类，但是当屏幕变小时，td 和 th 会相互堆叠。我希望表变小，或者以某种方式变宽。

我尝试了一些引导响应类，但在桌子上似乎很难。

<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>

我希望表格宽度随屏幕调整大小，但显然 col-6 使内容堆叠在彼此下方。

这是问题的图片