Не корректное отображение таблицы datatable в модале bootstrap

После любой сортировки До сортировки

Сталкивался кто нибудь с таким вопросом? Пока по иконке сортировки не кликнешь, заголовки отображаются не верно.

Код таблицы прикладываю, вне модала всё отлично отображается.

                                    <div class="col-md-12 m-b-10" id="give_me_table" style="display: none;width: 100%;" >
                                        <script>
                                           add_sofa_module_table_ajax=null;
                                           var sofa_id = document.getElementById("gmc_id").value;
                                        </script>
                                        <div class="table-responsive">
                                            <table id="add_sofa_module_table_ajax" class="display nowrap hover order-column compact " cellspacing="0" width="100%" style="width: 100%;">
                                                <thead>
                                                <tr>
                                                    <th>№</th>
                                                    <th>Модель</th>
                                                    <th>Модуль</th>
                                                    <th>Механизм</th>
                                                    <th>Декор</th>
                                                    <th>Ткань</th>
                                                    <th>Прострочка</th>
                                                    <th>Сторона угла</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
        add_sofa_module_table_ajax = $('#add_sofa_module_table_ajax').DataTable({
            orderCellsTop: true,
            fixedHeader: true,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Все"]],
            dom: 'flrtip',
            pageLength: <? echo $a_long_table;?>,
            scrollY: 650,
            scrollX: 650,
            scrollCollapse: true,
            order: [0, "desc"],
            scroller: true,
            sorting: false,
            language: {
                url: "js/Russian.lang"
            },
            processing: true,
            ajax: "ajax_sofa_module.php",
            columns: [
                {data: 'gmcasm_id'},
                {data: 'hbsm_id'},
                {data: 'hbsm_main_id'},
                {data: 'hbsm_type'},
                {data: 'hbsm_mech'},
                {data: 'hbsm_decor'},
                {data: 'hbsm_cloth_id'},
                {data: 'hbsm_prostroc'},
                {data: 'hbsm_ugol'},
                {data: 'hbsm_status'}
            ]
        });

Ответы (1 шт):

Автор решения: Denis Gimranov

Вопрос решён, необходимо добавить стиль

.dataTables_scrollHeadInner {
    width:100% !important;
    padding: 0 !important;
}

И не забыть у таблицы, в html разметке добавить width=100%

→ Ссылка