[HTML] Table 첫행고정 , th 고정 (feat. SlimScrollBar.js)

table을 사용하다 보면 제목? table head 부분을 고정시키고 아래있는 Tbody (Table Body)부분은 스크롤을 만들어서 사용 하고 싶을 떄가 있습니다.

 

물론 CSS로 조지면 당연히 원하는대로 만들 수 있지만 빠르게 만들어야 하고 CSS도 많이 건들여야 하는 상황에서는 어떻게 해야될까요?

 

답은 아래에 있습니다.

 

slimScrollBar API를 사용하면 됩니다.

http://rocha.la/jQuery-slimScroll

jQuery slimScroll | rocha.la | JavaScript and my other hobbies

https://github.com/rochal/jQuery-slimScroll

rochal/jQuery-slimScroll

 

심플하게 사용해 볼까요?

아래의 HTML이 있습니다. 

Id는 SlimScrollBar를 위해 만들었습니다.

<div>
	<table>
    	<thead>
        	<tr>
            	<th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
            </tr>
        </thead>
        <tbody id="slimScroll">
        	<tr>
            	<td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
            </tr>
        </tbody>
    </table>

</div>

 

JavaScript

$('#slimScroll').slimScroll({  
  size : "5px", //스크롤 사이즈
  alwaysVisible: true //항상 보여줄 것인지  
})

 

이렇게 HTML을 만들고 JavaScript에 SlimScroll을 넣으면 그 해당 영역에는 스크롤이 얉게 생길 겁니다 ㅎ

이 것으로 테이블에 제목 행을 고정하고 내용에 스크롤이 들어가는 API 사용법을 알게 되었습니다.

 

직접 사이트에 들어가면 slimScroll의 속성들도 많이 있으니 한번정도 읽어보시는게 좋을 것 같습니다.