title: DataTables with Bootstrap's table-responsive always has small x-overflow
body: <p>I am using DataTables and Bootstrap but always seeing a tiny bit of x-overflow on my tables, no matter how many or few columns I have. Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/023yJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/023yJ.png" alt="enter image description here"></a></p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table data-table"&gt;
          &lt;thead&gt;
              ...
          &lt;/thead&gt;
          &lt;tbody&gt;
              ...
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't apply any styles to the <code>data-table</code> class and the <code>table</code> and <code>table-responsive</code> classes are both Bootstrap's.</p>
  
  <p>My initialization code:</p>
  
  <pre><code>$('.data-table').DataTable();
  </code></pre>
  
  <p>How can I eliminate this unnecessary x-scroll? I want it only to be used when the screen is much smaller and the columns obviously do not fit.</p>