반응형
table을 사용하다 보면 제목? table head 부분을 고정시키고 아래있는 Tbody (Table Body)부분은 스크롤을 만들어서 사용 하고 싶을 떄가 있습니다.
물론 CSS로 조지면 당연히 원하는대로 만들 수 있지만 빠르게 만들어야 하고 CSS도 많이 건들여야 하는 상황에서는 어떻게 해야될까요?
답은 아래에 있습니다.
slimScrollBar API를 사용하면 됩니다.
http://rocha.la/jQuery-slimScroll
https://github.com/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의 속성들도 많이 있으니 한번정도 읽어보시는게 좋을 것 같습니다.
'IT > 퍼블리싱 (html+css)' 카테고리의 다른 글
[HTML] 카카오톡 사이트 링크 시 이미지 , 데이터 변경 (0) | 2022.05.06 |
---|---|
[HTML] EMAIL pdf 파일 다운로드 링크 정보 정리 (0) | 2022.03.07 |
[HTML]Textarea 영역 크기 조절 없애기 (0) | 2021.03.02 |
[CSS]margin , padding 고정 값 (0) | 2021.01.22 |
[CSS] Background-color 투명 or 배경 없애기 (0) | 2021.01.19 |