Не корректное отображение таблицы 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%

