Заголовок таблицы данных не изменяется при скрытой боковой панели

Question

Я добавил боковую панель к одному из View, где находится таблица. Я использую плагин datatables для этой таблицы.

Боковая панель может быть переключена или скрыта. Проблема возникает, когда я скрываю боковую панель. Размер таблицы корректно изменяется, а заголовок - нет. Я могу настроить заголовок, нажав на него. Под изменением размера я подразумевал, что я меняю родителя width следующим образом:

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

Я предоставляю фрагмент кода ниже. Вам нужно войти в режим полной страницы, чтобы увидеть мою проблему.

Я читал, что функция columns.adjust() может помочь, но это не так. У меня нет больше идей, как я могу это исправить.

Как изменить размер заголовка таблицы или настроить его на tbody width?

$(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 
            });

        });

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 > a,
.sidebar-wrapper .sidebar-dropdown > 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 > div {
        padding: 20px 40px;
    }

.page-wrapper .page-content {
    overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
    <i class="fas fa-bars"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper bg-dark">
      <div class="sidebar-content">
        <div id="close-sidebar">
          <i class="fas fa-times">CLOSE</i>
        </div>
      </div>
  </nav>
  <!-- sidebar-wrapper  -->
  <main class="page-content bg-light">
    <div class="row tasks-list">
      <div class="col">
        <div id="result">
          <table id="testtable" class="table display" style="width:100%;">
            <thead class="bg-light">
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
              </tr>
            </thead>
            <tbody>
              <tr id="10749" role="row" class="odd">
                <td class="sorting_1">10749</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14581" role="row" class="even">
                <td class="sorting_1">14581</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14794" role="row" class="odd">
                <td class="sorting_1">14794</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14950" role="row" class="even">
                <td class="sorting_1">14950</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="15128" role="row" class="odd">
                <td class="sorting_1">15128</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
</div>

Answer 1

просто добавьте это к вашему CSS:

    .dataTables_scrollHeadInner, .table{
      width:100%!important
         };

это всегда будет соответствовать tr на всю ширину стола!