title: Datatable isn't full width
body: <p>I have 3 navs each include different table works with datatables but in second and third navs my tables are not full width. I've also tried some solutions <a href="https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/" rel="nofollow noreferrer">here</a> but no luck.</p>
  
  <h1>Screenshots</h1>
  
  <p><code>first tab</code></p>
  
  <p><a href="https://i.stack.imgur.com/2hCI3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hCI3.png" alt="one"></a></p>
  
  <p><code>seond tab</code></p>
  
  <p><a href="https://i.stack.imgur.com/kGoFH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGoFH.png" alt="two"></a></p>
  
  <h1>Code</h1>
  
  <pre><code>&lt;link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet"&gt;
  &lt;script src="{{ asset('js/jquery.dataTables.min.js') }}"&gt;&lt;/script&gt;
  &lt;script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"&gt;&lt;/script&gt;
  &lt;script defer&gt;
      $(document).ready(function() {
          $('.example').DataTable({
              responsive: true,
              "aaSorting": [[ 0, "desc" ]],
              dom: "&lt;'row'&lt;'col-sm-6'l&gt;&lt;'col-sm-6 float-right'f&gt;&lt;'col-sm-12 mb-3 d-flex justify-content-center'p&gt;&gt;" +
              "&lt;'row'&lt;'col-md-12'tr&gt;&gt;" +
              "&lt;'row'&lt;'col-sm-5 mt-3'i&gt;&lt;'col-sm-7'p&gt;&gt;",
          });
      });
  &lt;/script&gt;
  
  {{-- trying to solve the width issue (testing) --}}
  &lt;script&gt;
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any idea?</p>