javascript - dataTables.js not resizing properly. Table overflows window still -

i using datatables.js https://datatables.net/ using responsive extension , can not table responsively resize. insight grand.

the table overflows window.

if expand way out columns shown, doesn't start hiding columns until 3rd column off screen

i have created jsfiddle code.

$(document).ready(function() {    // setup - add text input each footer cell    $('#table_assets tfoot th').each(function() {      var title = $('#table_assets thead th').eq($(this).index()).text();      $(this).html('<input type="text" style="max-width:80px;" />');    });      // 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 search    table.columns().every(function() {      var = this;        $('input', this.footer()).on('keyup change', function() {        that.search(this.value)          .draw();      });    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://cdn.datatables.net/1.10.6/css/jquery.datatables.min.css" rel="stylesheet" />  <script src="https://cdn.datatables.net/1.10.6/js/jquery.datatables.min.js" type="text/javascript"></script>  <link href="https://cdn.datatables.net/responsive/1.0.6/css/datatables.responsive.css" rel="stylesheet">  <script src="https://cdn.datatables.net/responsive/1.0.6/js/datatables.responsive.js" type="text/javascript"></script>    <div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">    <table id="table_assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">      <thead>        <tr style="white-space:nowrap;">          <th scope="col">name:</th>          <th scope="col">type:</th>          <th scope="col">manufacturer</th>          <th scope="col">supplier</th>          <th scope="col">quantity</th>          <th scope="col">serial number</th>          <th scope="col">location:</th>          <th scope="col">comments</th>          <th scope="col">computer name</th>          <th scope="col">room number</th>          <th scope="col">active</th>          <th scope="col">tech fee</th>          <th scope="col">specifications</th>          <th scope="col">deploy date</th>          <th scope="col">user</th>          <th scope="col">department</th>          <th scope="col">building</th>          <th scope="col">tickets</th>        </tr>      </thead>      <tbody>        <tr>          <td style="width:auto;">doom doom!</td>          <td>laptop</td>          <td>hp</td>          <td>none</td>          <td>33</td>          <td>sdfg</td>          <td>sdfg</td>          <td>dfhgdfh</td>          <td>nebulus</td>          <td>2345</td>          <td>true</td>          <td>true</td>          <td>stuff space</td>          <td>5/30/2015</td>          <td>michaels | joey</td>          <td>staff</td>          <td></td>          <td>            <br />            <div class="grey">no tickets found</div>          </td>        </tr>        <tr>          <td style="width:auto;">dr. von doom</td>          <td>laptop</td>          <td>hp</td>          <td>none</td>          <td>0</td>          <td>123412341234</td>          <td>dr. doom&#39;s lair</td>          <td></td>          <td>spiderman</td>          <td>42</td>          <td>true</td>          <td></td>          <td>spidey sense tingling. ^_^</td>          <td>6/18/2015</td>          <td>michaels | joey</td>          <td>staff</td>          <td>aic faculty</td>          <td>            <br />            <div class="grey">no tickets found</div>          </td>        </tr>      </tbody>      <tfoot>        <tr class="sortbottom">          <th scope="col">name:</th>          <th scope="col">type:</th>          <th scope="col">manufacturer</th>          <th scope="col">supplier</th>          <th scope="col">quantity</th>          <th scope="col">serial number</th>          <th scope="col">location:</th>          <th scope="col">comments</th>          <th scope="col">computer name</th>          <th scope="col">room number</th>          <th scope="col">active</th>          <th scope="col">tech fee</th>          <th scope="col">specifications</th>          <th scope="col">deploy date</th>          <th scope="col">user</th>          <th scope="col">department</th>          <th scope="col">building</th>          <th scope="col">tickets</th>        </tr>      </tfoot>    </table>  </div>

i have same issue, i'm using jquery datatables 1.10.7 , extension responsive 1.0.6, solved adding line in "datatables.responsive.js" in _resize function, line 560.

add next line @ end of function:

$(dt.table().node()).removeattr('style');

that should work.

the function this:

_resize: function() {    var dt = this.s.dt;    var width = $(window).width();    var breakpoints = this.c.breakpoints;    var breakpoint = breakpoints[0].name;    var columns = this.s.columns;    var i, ien;      // determine breakpoint @    (i = breakpoints.length - 1; >= 0; i--) {      if (width <= breakpoints[i].width) {        breakpoint = breakpoints[i].name;        break;      }    }      // show columns break point    var columnsvis = this._columnsvisiblity(breakpoint);      // set class before column visibility changed event    // listeners know state is. need determine if there    // columns not visible can shown    var collapsedclass = false;    (i = 0, ien = columns.length; < ien; i++) {      if (columnsvis[i] === false && !columns[i].never) {        collapsedclass = true;        break;      }    }      $(dt.table().node()).toggleclass('collapsed', collapsedclass);      dt.columns().eq(0).each(function(colidx, i) {      dt.column(colidx).visible(columnsvis[i]);    });      $(dt.table().node()).removeattr('style');  },

best regards.