TBODY 스크롤 만드는방법
table 에서
타이틀이 상단에 고정되어있고
아래 표 내용에서 길어지는 경우 스크롤바를 만드는 방법입니다.
jquery로 스크립트 작업을 많이 하고 있는데
스크립트 사용하지 않고 table 내에서 tbody 에만 스크롤기능을 주는 방법을 알아보겠습니다.
<style>
.scroll_table table {border-collapse: collapse; width: 100%;}
.scroll_table thead {float: left; width: 890px;}
.scroll_table tbody {overflow-y: auto; overflow-x:hidden; float: left; width: 890px; height:100px}
.scroll_table tbody tr {display: table;width: 890px;}
.scroll_table .td81 {width:81px;}
</style>
<div class="scroll_table" style="width:890px;">
<!-- 그래프 적용후 실제 높이를 조정해주세요. 바로 위 height px 값 -->
<table>
<thead>
<tr>
<td class="tdtitle td81">기간</td>
<td class="tdtitle td81">R선간전압<BR>(V)</td>
<td class="tdtitle td81">S선간전압<BR>(V)</td>
<td class="tdtitle td81">T선간전압<BR>(V)</td>
<td class="tdtitle td81">R선간전류<BR>(A)</td>
<td class="tdtitle td81">S선간전류<BR>(A)</td>
<td class="tdtitle td81">T선간전류<BR>(A)</td>
<td class="tdtitle td81">역률</td>
<td class="tdtitle td81">주파수<BR>(Hz)</td>
<td class="tdtitle td81">지상무효<BR>전력량<BR>(KVarh)</td>
<td class="tdtitle td81">유효전력량<BR>(KVarh)</td>
</tr>
</thead>
<tbody>
<tr>
<td class="tdleft td81">00:00</td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
</tr>
<tr>
<td class="tdleft td81">00:00</td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
<td class="td81"></td>
</tr>
</table>
</div>
table 안 thead 영역은 고정되고 아래 tbody 영역만 높이가 길어지면 스크롤바가 생깁니다.
ie8이상 지원되고 ie7이하에서는 작동하지 않습니다.
그외 크롬, 사파리 등 타 브라우저에서는 정상작동합니다.
table에 스크롤바 적용하기 참 쉽죠잉
