Css 引导4表响应溢出-x不工作

根据引导文档，带有class.table的表应该包装在带有class.table的div中。我正是这样做的，但表在移动设备中不会水平溢出，即使div具有属性

overflow-x:auto

这是截图


这是我的代码

<div class="table-responsive">
  <table class="table table-light table-hover">
    <caption class="font-weight-bold pl-2">Base Rebates</caption>
    <thead class="">
      <tr>
        <th scope="col">LOB</th>
        <th scope="col">Product Name</th>
        <th scope="col">Product Category</th>
        <th scope="col" class="">Revenue</th>
        <th scope="col">Rebate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>CSG</td>
        <td>
          <select class="form-control" name="" id="">
            <option value="">ABC</option>
            <option value="">DEF</option>
          </select>
        </td>
        <td>Client A</td>
        <td><input class="form-control" type="number" value="12345"></td>
        <td>185</td>
      </tr>
    </tbody>
  </table>
</div>


基本折扣
高球
品名
产品类别
收入
回扣
CSG
基础知识
DEF
客户A
185
显然，它正在工作。下面的示例将表格放在引导网格列中，分别为4和8



基本折扣
高球
品名
产品类别
收入
回扣
CSG
基础知识
DEF
客户A
185
基本折扣
高球
品名
产品类别
收入
回扣
CSG
基础知识
DEF
客户A
185
实际上是我的样式表中的CSS导致了这个问题。我将
单词break:breal:all
应用于
th
元素。我删除了CSS和溢出正在工作的代码。
我看不出您的代码有任何问题。我尝试了我的网站，它可以正常滚动。任何图片将不胜感激。我已经更新了手机视图截图的问题