[JQuery] 제이쿼리의 mCustomScrollbar에서 <thead>를 고정시키는 방법

 

 

디자인 업체가 이번에 단순 목록 퍼블을 줬는데 아래와 같은 구조로 줬다.

근데 이 코드로 목록을 표출하면 스크롤을 내릴 때, 헤더까지 같이 내려간다. 

감리요청 사항이 헤더는 고정되게 해달라는 요청사항이 있었는데..

 

일반 <div> 태그면 문제가 없었겠지만, <thead>나 <tbody> 태그에는 제이쿼리로 각각 스크롤을 줄 수 없다고 해서

<thead>와 <tbody>를 <div>태그로 감싸서 필요한 부분에 스크롤바를 주었다.

코드는 아래와 같다.

 

 

수정전 코드

$(".table_wrapper").mCustomScrollbar({
  theme: "minimal-dark",
});

<table class="table_wrapper">
    <caption></caption>
      <thead>
        <tr>
          <th>헤더1</th>
          <th>헤더2</th>
          <th>헤더3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>바디1</td>
          <td>바디2</td>
          <td>바디3</td>
        </tr>
      </tbody>
</table>

 

 

 

수정후 코드

$(".body_wrapper").mCustomScrollbar({
  theme: "minimal-dark",
});

<table class="table_wrapper">
    <caption></caption>
    <div class="head_wrapper">
      <thead>
        <tr>
          <th>헤더1</th>
          <th>헤더2</th>
          <th>헤더3</th>
        </tr>
      </thead>
    </div>
    <div class="body_wrapper">
      <tbody>
        <tr>
          <td>바디1</td>
          <td>바디2</td>
          <td>바디3</td>
        </tr>
      </tbody>
    </div>
</table>

 

 

 

위와 같이 코드를 짜니까. body에만 스크롤바가 걸렸다. 

처음부터 <table>구조가 아니었거나, 아니면 그냥 다른 scoll 함수를 써도 될 거 같다.