모달 내 dataTable 의 th와 td 정렬이 맞지 않는 문제 대응

부트스트랩 기반의 홈페이지 제작 중

 

모달 내 dataTable의 정렬이 안맞는 문제를 찾아보다가 해결함

 

 

html 구조는 아래와 같음

<div class="modal fade" id="modal-이름">
  모달 컨텐츠
</div>

 

스크립트 코드는 아래와 같음

$(document).ready(function(){
  $("#example").DataTable({
    데이터테이블 속성
  });

  // 모달 내 datatable th와 td 정렬 안맞는 문제 대응
  $('#modal-이름').on('shown.bs.modal', function () {
    var table = $('#example').DataTable();
    table.columns.adjust();
  });
})