title: Bootstrap 4 table responsive overflow-x not working
body: <p>According to the bootstrap documentation, the table with class .table should be wrapped inside div with class .table-responsive. I am doing exactly but table does not horizontally overflows in mobile devices even though the div has the property <code>overflow-x: auto;</code>.</p>
  
  <p><strong>Here is the screenshot</strong></p>
  
  <p><a href="https://ibb.co/9cZLjMy" rel="nofollow noreferrer">https://ibb.co/9cZLjMy</a></p>
  
  <p><strong>Here is my code</strong></p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
    &lt;table class="table table-light table-hover"&gt;
      &lt;caption class="font-weight-bold pl-2"&gt;Base Rebates&lt;/caption&gt;
      &lt;thead class=""&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;LOB&lt;/th&gt;
          &lt;th scope="col"&gt;Product Name&lt;/th&gt;
          &lt;th scope="col"&gt;Product Category&lt;/th&gt;
          &lt;th scope="col" class=""&gt;Revenue&lt;/th&gt;
          &lt;th scope="col"&gt;Rebate&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;CSG&lt;/td&gt;
          &lt;td&gt;
            &lt;select class="form-control" name="" id=""&gt;
              &lt;option value=""&gt;ABC&lt;/option&gt;
              &lt;option value=""&gt;DEF&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;Client A&lt;/td&gt;
          &lt;td&gt;&lt;input class="form-control" type="number" value="12345"&gt;&lt;/td&gt;
          &lt;td&gt;185&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>