如何修复DataTables autoWidth不起作用

Question

我尝试使用auto更改表宽度，但未修复DataTables。 当我使用手机像素尺寸时会发生这种情况。在笔记本电脑/台式机像素上不会发生这种情况。 是否缺少一些代码？

下图显示数据超出了数据表。

HTML

<div class="col-lg-12 col-md-12 col-sm-12 mb-30">
   <table id="example" class="display compact nowrap" style="width:100%">
      <thead>
        <tr>
          <th class="table-plus datatable-nosort">Num</th>
          <th>Region</th>
              .....
        </tr>
      </thead>
      <tbody>
        <tr>
            <td class="table-plus">1</td>
            <td>NORTHERN</td>
               .....
        </tr>
      </tbody>
   </table>
</div>

编辑： CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css
https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css

JS

$(document).ready(function() {
    $('#example').DataTable( {
        scrollCollapse: true,
        autoWidth: true,
        responsive: true,
        columnDefs: [{
            targets: "datatable-nosort",
            orderable: false,
        }],
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "language": {
        "info": "_START_-_END_ of _TOTAL_ entries",
        searchPlaceholder: "Search"
        },
    });
});