隐藏侧边栏时，数据表表头不会调整大小

Question

我已将侧边栏添加到表格所在的视图之一。我正在为该表使用数据表插件。

侧边栏可以切换或隐藏。当我隐藏侧边栏时出现问题。表体可以正确调整大小，但表头却不能。我可以通过单击它来调整标题。通过调整大小，我的意思是我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宽度？

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

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

Answer 1

只需将其添加到您的 css 中：

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

这将始终使 tr 适合整个表格宽度！