title: Responsive Bootstrap Datatable not collapsing columns at the correct point
body: <p>I'm using Datatables.net latest, with datatables and bootstrap. I suppose my question is: What does Datatables Responsive Bootstrap use to detect overflow, because it clearly isn't the parent width.</p>
  
  <p>Here is my result:
  <img src="https://i.stack.imgur.com/TqAsc.png" alt="enter image description here"></p>
  
  <p>It's a pretty straight forward problem. If I reduce the width of my window 1 more pixel the column will finally collapse. If I then expand it, it returns to this state. I would like to prevent overflow from the parent bootstrap panel. I've removed the bootstrap grid divs (row/col-xs-12, etc) to eliminate potitial problems, but once this is resolved (or I better understand the problem) I intend to utilize the bootstrap grid system as well. </p>
  
  <p>Here is a plunkr that perfectly replicated the problem (collapse the run view):
  <a href="http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview">http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Tables - PixelAdmin&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/&gt;
      &lt;link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/&gt;
      &lt;style&gt;
          body {
              font-size: 140%;
          }
  
          table.dataTable th,
          table.dataTable td {
              white-space: nowrap;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body style="padding-top: 40px;"&gt;
  
  &lt;div class="panel panel-primary" style="margin: 51px; padding: 0;"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body" style="padding: 0;"&gt;
          &lt;div style="width: 100%; border: 1px solid red;"&gt;
              &lt;table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Position&lt;/th&gt;
                      &lt;th&gt;Office&lt;/th&gt;
                      &lt;th&gt;Extn.&lt;/th&gt;
                      &lt;th&gt;Start date&lt;/th&gt;
                      &lt;th&gt;Salary&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $('#example')
                  .dataTable({
                      "responsive": true,
                      "ajax": 'data.json'
                  });
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>