title: How to fix responsive table issues in Bootstrap 4?
body: <p>In one of my project, I'm trying Bootstrap 4. In a list page of the project I use to HTML table along with Bootstrap 4 available table classes to make the table responsive, but after a certain period of time ( when tables width crosses window width ) in large screen, Bootstrap responsive table classes are not working. I've tried all of the possible Bootstrap Responsive Table class. Here is my code behind the table:</p>
  
  <pre><code>&lt;div class="card-body" id="loadContent"&gt;
      &lt;div class="table-responsive-xl table-responsive-lg table-responsive-md table-responsive-sm table-responsive"&gt;
          &lt;table class="table table-bordered table-striped table-hover" id="professionalTable"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Specialization&lt;/th&gt;
                      &lt;th&gt;PCN&lt;/th&gt;
                      &lt;th&gt;Grant Type&lt;/th&gt;
                      &lt;th&gt;Total Grant&lt;/th&gt;
                      &lt;th&gt;Payment Amount&lt;/th&gt;
                      &lt;th&gt;Grant Purpose Amount&lt;/th&gt;
                      &lt;th&gt;Date Expedenture&lt;/th&gt;
                      &lt;th&gt;Company&lt;/th&gt;
                      &lt;th&gt;Year&lt;/th&gt;
                      &lt;th&gt;Month&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Example 1&lt;/td&gt;
                      &lt;td&gt;Example 2&lt;/td&gt;
                      &lt;td&gt;Example 3&lt;/td&gt;
                      &lt;td&gt;Example 4&lt;/td&gt;
                      &lt;td&gt;Example 5&lt;/td&gt;
                      &lt;td&gt;Example 6&lt;/td&gt;
                      &lt;td&gt;Example 7&lt;/td&gt;
                      &lt;td&gt;Example 8&lt;/td&gt;
                      &lt;td&gt;Example 9&lt;/td&gt;
                      &lt;td&gt;Example 10&lt;/td&gt;
                      &lt;td&gt;Example 11&lt;/td&gt;
                      &lt;td&gt;Example 12&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Here is a screenshot of the problem using dummy data:
  <a href="https://i.stack.imgur.com/wGLnk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGLnk.png" alt="enter image description here"></a></p>
  
  <p>Did you notice the width of the table content crosses the width of the window?</p>
  
  <p>Can anyone tell how can I fix this issue? I mean currently the horizontal scrollbar is created by the browser (as it crosses the width of the window), but I want the scrollbar relative to the table itself.</p>