head fixed table with custom scrollbar

jquery.mCustomScrollbar.js 를 사용해 커스텀 스크롤바를 넣은 head fixed table

 

See the Pen head fixed table with mCustomscrollbar by publisher.kim (@publisherkim) on CodePen.

 

 

html

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <!-- jquery 하위버전 써야 제대로 작동함 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.css">
<script src="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.js"></script>

<!-- 스크롤 안생길때 -->
<div class="tbl_wrap">
    <table class="tbl_head">
      <colgroup>
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">제목1</th>
          <th scope="col">제목2</th>
          <th scope="col">제목3</th>
          <th scope="col">제목4</th>
          <th scope="col">제목5</th>
        </tr>
      </thead>
    </table>
    <div class="tbl_cont">
      <table>
        <colgroup>
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
        </colgroup>
        <tbody>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

<!-- 스크롤 생길때 -->
<div class="tbl_wrap">
    <table class="tbl_head">
      <colgroup>
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:20%;">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">제목1</th>
          <th scope="col">제목2</th>
          <th scope="col">제목3</th>
          <th scope="col">제목4</th>
          <th scope="col">제목5</th>
        </tr>
      </thead>
    </table>
    <div class="tbl_cont">
      <table>
        <colgroup>
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
          <col style="width:20%;">
        </colgroup>
        <tbody>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
         <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
          <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
            <td>내용5</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

 

css

/* table */
.tbl_wrap{width:600px; margin:0 auto; position: relative; margin-top:30px;background:#fafafa;}
.tbl_wrap table thead th{font-size: 15px; font-weight: 300; height: 35px; text-align: center; border-bottom: 1px solid #ddd; border-top: 1px solid #000; text-align: left; background:#fafafa; padding:0 5px;}
.tbl_wrap .tbl_cont{background:#fff;}
.tbl_wrap table tbody td{border-bottom: 1px solid #ddd; height: 40px; font-size: 15px; font-weight: 300; word-break: break-all; padding:0 5px;}
.tbl_wrap table tbody td .sml{font-size: 16px;}
.tbl_wrap table.scrollon{width: calc(100% - 20px); }
.tbl_wrap table.scrollon::before, .tbl_wrap table.scrollon::after{content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 0; left: 0;}
.tbl_wrap table.scrollon::before{background: #000;}
.tbl_wrap table.scrollon::after{background: #ddd; top: 35px;}
.tbl_wrap table.scrollon thead th{border:0;}
.tbl_wrap .mCustomScrollbar{max-height: 165px;}

/* scrollbar custom */
.mCSB_scrollTools{opacity: 1 !important;}
.mCSB_inside>.mCSB_container{margin-right: 20px;}
.mCSB_scrollTools .mCSB_draggerRail{width: 11px; border-radius: 100px; background: #ddd; height: calc(100% - 2px); margin-top: 2px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 7px; margin-top: 4px;  opacity: 1 !important; background-color: #fff !important;}
.mCSB_scrollTools .mCSB_dragger{padding-bottom: 6px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{height: calc(100% - 6px);}

 

js *jquery 필요

$(document).ready(function() {
  $(".tbl_cont").mCustomScrollbar();
  
  // 스크롤이 있는 경우 tbl_head에 scrollon을 추가하기
  $(".tbl_cont").each(function() {
    if($(this).hasClass("mCS_no_scrollbar")) {
        $(this).prev().removeClass("scrollon");
    } else {
        $(this).prev().addClass("scrollon");;
    }
  });
});