标头宽度未映射数据表中的正文宽度-javascript

Question

页眉宽度未与数据表中的正文宽度映射。 单击标题后，它会与正文宽度映射。

这是加载数据表时的图像：

点击标题后：

这是代码：

var table_name='#'+db_table_name
console.log(table_name)
var table = $(table_name).DataTable(
    {
        "scrollY": "400px",
        "aaSorting":[[filter_row,'asc']],

        "columnDefs": [
            {"visible": false, "targets": filter_row}
        ],
        "bInfo": false,
        "bLengthChange": false,
        "bPaginate": false,
        "sDom": 'l<"H"Rf>t<"F"ip>',
        "drawCallback": function (settings) {
            var api = this.api();
            var rows = api.rows({page: 'current'}).nodes();

            var last = null;
            var groupadmin = [];
            console.log("ENTERED")

            api.column(filter_row, {page: 'current'}).data().each(function (group, i) {

                if (last !== group) {

                    $(rows).eq(i).before(
                        '<tr class="group" id="' + i + '"><td colspan="'+data_cols+'">' + group + '</td></tr>'
                    );
                    groupadmin.push(i);
                    last = group;
                }
            });


            for (var k = 0; k < groupadmin.length; k++) {
                // Code added for adding class to sibling elements as "group_<id>"
                $("#" + groupadmin[k]).nextUntil("#" + groupadmin[k + 1]).addClass(' group_' + groupadmin[k]).addClass('td_row');
                // Code added for adding Toggle functionality for each group
                $("#" + groupadmin[k]).click(function () {
                    var gid = $(this).attr("id");
                    $(".group_" + gid).slideToggle(300);
                });

            }
        }
    }
);

请帮助我解决这个问题。