title: dataTables.js not resizing properly. Table overflows window still
body: <p>I am using dataTables.js from <a href="https://datatables.net/" rel="nofollow">https://datatables.net/</a> I am also using their <a href="https://datatables.net/extensions/responsive/" rel="nofollow">responsive extension</a> ,  but I can not get the table to properly responsively resize. Any insight would be grand. </p>
  
  <p>The table overflows the window.</p>
  
  <p>If you expand it all the way out so all the columns are shown, it doesn't even start hiding columns until the 3rd column is off screen</p>
  
  <p>I have created a <a href="https://jsfiddle.net/71cucz00/" rel="nofollow">jsfiddle</a> with my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#Table_Assets tfoot th').each(function() {
      var title = $('#Table_Assets thead th').eq($(this).index()).text();
      $(this).html('&lt;input type="text" style="max-width:80px;" /&gt;');
    });
  
    // DataTable
    var table = $('#Table_Assets').DataTable({
      responsive: true,
      "autoWidth": false,
      "order": [
        [13, "desc"]
      ],
      initComplete: function() {
        var r = $('#Table_Assets tfoot tr');
        r.find('th').each(function() {
          $(this).css('padding', 8);
        });
        $('#Table_Assets thead').append(r);
        $('#search_0').css('text-align', 'center');
      },
    });
  
    $('#Table_Assets').resize()
  
    // Apply the search
    table.columns().every(function() {
      var that = this;
  
      $('input', this.footer()).on('keyup change', function() {
        that.search(this.value)
          .draw();
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet"&gt;
  &lt;script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center"&gt;
    &lt;table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto"&gt;
      &lt;thead&gt;
        &lt;tr style="white-space:nowrap;"&gt;
          &lt;th scope="col"&gt;Name:&lt;/th&gt;
          &lt;th scope="col"&gt;Type:&lt;/th&gt;
          &lt;th scope="col"&gt;Manufacturer&lt;/th&gt;
          &lt;th scope="col"&gt;Supplier&lt;/th&gt;
          &lt;th scope="col"&gt;Quantity&lt;/th&gt;
          &lt;th scope="col"&gt;Serial Number&lt;/th&gt;
          &lt;th scope="col"&gt;Location:&lt;/th&gt;
          &lt;th scope="col"&gt;Comments&lt;/th&gt;
          &lt;th scope="col"&gt;Computer Name&lt;/th&gt;
          &lt;th scope="col"&gt;Room Number&lt;/th&gt;
          &lt;th scope="col"&gt;Active&lt;/th&gt;
          &lt;th scope="col"&gt;Tech Fee&lt;/th&gt;
          &lt;th scope="col"&gt;Specifications&lt;/th&gt;
          &lt;th scope="col"&gt;Deploy Date&lt;/th&gt;
          &lt;th scope="col"&gt;User&lt;/th&gt;
          &lt;th scope="col"&gt;Department&lt;/th&gt;
          &lt;th scope="col"&gt;Building&lt;/th&gt;
          &lt;th scope="col"&gt;Tickets&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="width:auto;"&gt;Doom DOOM!&lt;/td&gt;
          &lt;td&gt;Laptop&lt;/td&gt;
          &lt;td&gt;HP&lt;/td&gt;
          &lt;td&gt;none&lt;/td&gt;
          &lt;td&gt;33&lt;/td&gt;
          &lt;td&gt;sdfg&lt;/td&gt;
          &lt;td&gt;sdfg&lt;/td&gt;
          &lt;td&gt;dfhgdfh&lt;/td&gt;
          &lt;td&gt;Nebulus&lt;/td&gt;
          &lt;td&gt;2345&lt;/td&gt;
          &lt;td&gt;True&lt;/td&gt;
          &lt;td&gt;True&lt;/td&gt;
          &lt;td&gt;Stuff from space&lt;/td&gt;
          &lt;td&gt;5/30/2015&lt;/td&gt;
          &lt;td&gt;Michaels | Joey&lt;/td&gt;
          &lt;td&gt;Staff&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;br /&gt;
            &lt;div class="grey"&gt;No tickets found&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="width:auto;"&gt;Dr. Von Doom&lt;/td&gt;
          &lt;td&gt;Laptop&lt;/td&gt;
          &lt;td&gt;HP&lt;/td&gt;
          &lt;td&gt;none&lt;/td&gt;
          &lt;td&gt;0&lt;/td&gt;
          &lt;td&gt;123412341234&lt;/td&gt;
          &lt;td&gt;Dr. Doom&amp;#39;s Lair&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;Spiderman&lt;/td&gt;
          &lt;td&gt;42&lt;/td&gt;
          &lt;td&gt;True&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;Spidey sense is tingling. ^_^&lt;/td&gt;
          &lt;td&gt;6/18/2015&lt;/td&gt;
          &lt;td&gt;Michaels | Joey&lt;/td&gt;
          &lt;td&gt;Staff&lt;/td&gt;
          &lt;td&gt;AIC Faculty&lt;/td&gt;
          &lt;td&gt;
            &lt;br /&gt;
            &lt;div class="grey"&gt;No tickets found&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr class="sortbottom"&gt;
          &lt;th scope="col"&gt;Name:&lt;/th&gt;
          &lt;th scope="col"&gt;Type:&lt;/th&gt;
          &lt;th scope="col"&gt;Manufacturer&lt;/th&gt;
          &lt;th scope="col"&gt;Supplier&lt;/th&gt;
          &lt;th scope="col"&gt;Quantity&lt;/th&gt;
          &lt;th scope="col"&gt;Serial Number&lt;/th&gt;
          &lt;th scope="col"&gt;Location:&lt;/th&gt;
          &lt;th scope="col"&gt;Comments&lt;/th&gt;
          &lt;th scope="col"&gt;Computer Name&lt;/th&gt;
          &lt;th scope="col"&gt;Room Number&lt;/th&gt;
          &lt;th scope="col"&gt;Active&lt;/th&gt;
          &lt;th scope="col"&gt;Tech Fee&lt;/th&gt;
          &lt;th scope="col"&gt;Specifications&lt;/th&gt;
          &lt;th scope="col"&gt;Deploy Date&lt;/th&gt;
          &lt;th scope="col"&gt;User&lt;/th&gt;
          &lt;th scope="col"&gt;Department&lt;/th&gt;
          &lt;th scope="col"&gt;Building&lt;/th&gt;
          &lt;th scope="col"&gt;Tickets&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>