如何防止我的td相互堆叠？

Question

我试图在屏幕尺寸变小时使表格响应。它是col-6内部的一个表响应类，但是当屏幕变小时，t和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会使内容堆栈彼此重叠。

这是问题的图片

Answer 1

表的容器为6列，您是否尝试过使其更大？

<div class="col-6 col-lg-6 col-xl-6">

另一种更好的做法是创建一个游乐场，以便人们可以看到其他影响案件的情况