ширина заголовка не соответствует ширине тела в datatable - JavaScript

Question

Ширина заголовка не сопоставляется с шириной тела в datatable.После заголовка клика он отображается с шириной тела.

Это изображение при загрузке данных:

После нажатия назаголовок:

Вот код:

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

            }
        }
    }
);

Пожалуйста, помогите мне с этой проблемой.