[컴][웹] scrollbar table with fixed header

scroll 있는 table 만들기 / 테이블에 스크롤 달기 / header 는 고정시키고 scroll bar 추가하기 / fixed header with scroll on html table / 스크롤이 되는 고정헤더 테이블

고정 header 를 갖는 scroll table

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="overlayed-text">A</span></th>
                <th><span class="overlayed-text">B</span></th>
                <th><span class="overlayed-text">C</span></th>
            </tr>
        </thead>
        <tbody>
            <tr> 
                <td>1, 0</td> 
                <td>2, 0</td>
                <td>3, 0</td> 
            </tr>
            ...
        </tbody>
    </table>
  </div>
</div>

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;  /* 150px 이 넘어가면 scroll 이 생긴다.*/
  overflow:auto;  
  margin-top:20px; /* 이 빈 공간에 header 를 넣게 된다. */
}
#table-wrapper table thead th .overlayed-text {
  position:absolute;   
  top:-20px;  /* margin-top:20px; 과 같은 값이다. */
  
}

span 이 필요하다. th 자체는 table 에 속해있어서 마음대로 위치조정이 안된다. 그래서 th안에 다른 element 를 넣어줘야 한다.

Reference

1. Edit fiddle - JSFiddle