오늘은 html을 이용하여 jsp 스크롤바 생성 방법에 대해서 알아보겠습니다.
보통 익스플로러나 크롬에서는 표현될 데이터가 많으면 자동으로 스크롤바를 생성해 주는데요.
하지만 전체페이지가 아닌 일정 영역에 대해서만 데이터를 표현하고 스크롤바를 생성하기 위해서는 div와 style 태그를 이용하여 이를 구현할 수 있습니다.
1. 스크롤바 예제
위의 테이블 영역의 사이즈를 줄여보겠습니다.
사이즈를 줄이니 다음과 같이 데이터가 짤려서 정상적으로 표기되지 않는 문제가 발생하였습니다.
(인터넷 브라우저 특성상 호환성에 따라 자동 사이즈 조절로 이런 문제가 발생되지 않을 수 있습니다.)
이 문제를 해결하기 위해서는 테이블에 스크롤바를 생성해야 하는데 일단 테이블을 DIV로 감싸줘야 합니다.
2. 구현 방법
<div style="overflow: scroll; " >
테이블
</div>
위의 구문을에 넣어주시면 됩니다.
그러면 위와 같이 테이블에 스크롤 바가 생기게 됩니다.
위의 예제의 jsp 소스는 다음과 같으니 참고하시면 되겠습니다.
<div style="overflow: scroll; " > <table border="1" style="width: 700px; "> <tr> <td style="width: 300px">이름</td> <td>직원번호</td> <td>직책</td> <td>연봉</td> <td>입사일</td> </tr> <c:forEach var = "item" items ="${list }"> <tr> <td width="170px">제 이름은 ${item.ename } 입니다.</td> <td>${item.empno }</td> <td>${item.job }</td> <td>${item.sal }</td> <td>${item.hiredate }</td> </tr> </c:forEach> </table> </div>
답글 남기기