Заголовок с данными Jquery не выровнен по телу с

Question

У меня есть главная страница, когда пользователь нажимает кнопку ссылки, она должна открывать всплывающую модель с данными ученика. Все детали в табличном формате. Если они хотят прокрутить таблицу вверх, заголовок должен остаться, только строки должны двигаться.

Я сделал это, используя scrollY: true и фиксированный заголовок true в Jquery. Проблема после включения этого кода. заголовок не зафиксирован в столбце тела. Если убрать свиток: true, он работает нормально.

Если я ищу что-то, оно сразу выравнивается, точно так же, как если бы я сортировал любой столбец, то сразу выравнивался. Основная проблема - когда время загрузки формы не совпадает с заголовком и телом

Главная страница

<div class="modal-body">
  @Html.Partial("_SubtoolPage")
</div>

Модель всплывающего кода

<div>
<div class="panel-body modelpopup-scroll">
  <table id="StudTask" class="table-striped table table-bordered ">
    <thead>
     <tr>
     <th>ID</th>
    <th>Name</th>
   <th>Marks</th>
  </tr>
 </thead>

 <tbody>
   fetch row code.......
 </tbody>
</table>
</div>
</div>

Код сценария

<script>
$(document).ready(function () {
var table= $('#StudTask').dataTable({
"fixedHeader": true,
"scrollCollapse": true,
"scrollY": "600px",
"scrollX": "100%",
"paging": false,
"order": [[2, 'asc']]
});
}
</script>

Я пробовал ниже методы тоже

 //$('#RealTask').DataTable().columns.adjust();
 //$("#RealTask").DataTable().search("ss").draw();

и я также ссылался на эту ссылку:

Ссылка на

Все, что я пробовал, но я не могу решить. Не могли бы вы предложить, если у вас есть идея получше.

Спасибо!

Answer 1

Вы пытались удалить эти два класса "panel-body modelpopup-scroll" из верхнего DIV.

Надеюсь, вы исправите эту проблему. Если не просто вызвать $(window).trigger('resize'); после привязки таблицы.

Как:

setTimeout(function(){ $(window).trigger('resize'); }, 500);