title: Datatables table header is not resizing when sidebar is hidden
body: <p>I've added sidebar to one of View, where table is located. I'm using <a href="https://datatables.net/" rel="nofollow noreferrer">datatables</a> plugin for this table.</p>
  
  <p>Sidebar can be toggled or hidden. Problem occurs when I hide sidebar. Table body resizes correctly, but header doesn't. I can adjust header by clicking on it.  By resizing, I meant that I change parent <code>width</code> like this:</p>
  
  <pre><code>.page-wrapper.toggled .page-content .tasks-list {
          width: -webkit-calc(100% - 300px);
          width: -moz-calc(100% - 300px);
          width: calc(100% - 300px);
      }
  </code></pre>
  
  <p>I'm providing code snippet below. You would need to enter fullpage mode to see my problem.</p>
  
  <p>I read that <code>columns.adjust()</code> function might help, but it didn't. I don't have any more ideas how I can fix it. </p>
  
  <p>How to resize table header or adjust it to <code>tbody</code> width ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  
              var table = $('#testtable').DataTable({
                  scrollY: 500,
                  searching:false,
                  paging:false
                  //fixedHeader: {
                  //    header: true,
                  //    headerOffset: 230
                  //}
              });
  
              $("#close-sidebar").click(function () {
                  $(".page-wrapper").removeClass("toggled");
                  //table.columns.adjust(); have tried this but does not work  
              });
              $("#show-sidebar").click(function () {
                  $(".page-wrapper").addClass("toggled");
                  //table.columns.adjust(); have tried this but does not work 
              });
  
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
      overflow-x: hidden;
  }
  
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
      margin: auto auto;
  }
  
  .table tr {
      cursor: pointer;
  }
  
  
  tr {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  .page-content {
      height: 100%;
  }
  
  #task-wrapper {
      z-index: 1;
      background: white;
      width: 100%;
      height: 200px;
  }
  
  .tasks-list {
      position: absolute;
      overflow-y: hidden;
      width: 100%;
  }
  
      .page-wrapper .theme {
          width: 40px;
          height: 40px;
          display: inline-block;
          border-radius: 4px;
          margin: 2px;
      }
  
          .page-wrapper .theme.chiller-theme {
              background: #1e2229;
          }
  
      /*----------------toggled sidebar----------------*/
  
      .page-wrapper.toggled .sidebar-wrapper {
          left: 0px;
      }
  
  @media screen and (min-width: 768px) {
      .page-wrapper.toggled .page-content {
          padding-left: 300px;
      }
  
          .page-wrapper.toggled .page-content .tasks-list {
              width: -webkit-calc(100% - 300px);
              width: -moz-calc(100% - 300px);
              width: calc(100% - 300px);
          }
  }
  
  body {
      font-size: 0.9rem;
  }
  
  .page-wrapper .sidebar-wrapper,
  .sidebar-wrapper .sidebar-brand &gt; a,
  .sidebar-wrapper .sidebar-dropdown &gt; a:after,
  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
  .sidebar-wrapper ul li a i,
  .page-wrapper .page-content,
  .sidebar-wrapper .sidebar-search input.search-menu,
  .sidebar-wrapper .sidebar-search .input-group-text,
  .sidebar-wrapper .sidebar-menu ul li a,
  #show-sidebar,
  #close-sidebar {
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  
  #show-sidebar {
      position: fixed;
      left: 0;
      top: 10px;
      border-radius: 0 4px 4px 0px;
      width: 35px;
      transition-delay: 0.3s;
  }
  
  .page-wrapper.toggled #show-sidebar {
      left: -40px;
  }
  /*----------------sidebar-wrapper----------------*/
  
  .sidebar-wrapper {
      width: 260px;
      height: 100%;
      max-height: 100%;
      position: fixed;
      top: 0;
      left: -300px;
      z-index: 999;
      color:white;
  }
  
  
  /*--------------------------page-content-----------------------------*/
  
  .page-wrapper .page-content {
      display: inline-block;
      width: 100%;
      padding-left: 0px;
      padding-top: 20px;
  }
  
      .page-wrapper .page-content &gt; div {
          padding: 20px 40px;
      }
  
  .page-wrapper .page-content {
      overflow-x: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"/&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/&gt;
  &lt;div class="page-wrapper chiller-theme toggled"&gt;
    &lt;a id="show-sidebar" class="btn btn-sm btn-dark" href="#"&gt;
      &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;nav id="sidebar" class="sidebar-wrapper bg-dark"&gt;
        &lt;div class="sidebar-content"&gt;
          &lt;div id="close-sidebar"&gt;
            &lt;i class="fas fa-times"&gt;CLOSE&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- sidebar-wrapper  --&gt;
    &lt;main class="page-content bg-light"&gt;
      &lt;div class="row tasks-list"&gt;
        &lt;div class="col"&gt;
          &lt;div id="result"&gt;
            &lt;table id="testtable" class="table display" style="width:100%;"&gt;
              &lt;thead class="bg-light"&gt;
                &lt;tr&gt;
                  &lt;th&gt;Col1&lt;/th&gt;
                  &lt;th&gt;Col2&lt;/th&gt;
                  &lt;th&gt;Col3&lt;/th&gt;
                  &lt;th&gt;Col4&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr id="10749" role="row" class="odd"&gt;
                  &lt;td class="sorting_1"&gt;10749&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr id="14581" role="row" class="even"&gt;
                  &lt;td class="sorting_1"&gt;14581&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr id="14794" role="row" class="odd"&gt;
                  &lt;td class="sorting_1"&gt;14794&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr id="14950" role="row" class="even"&gt;
                  &lt;td class="sorting_1"&gt;14950&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr id="15128" role="row" class="odd"&gt;
                  &lt;td class="sorting_1"&gt;15128&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                  &lt;td&gt;Value&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>