[CSS] 테이블(table)에 스크롤 기능 만들기

테이블 스크롤 기능

table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다.

크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다.

이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다.

 

순서

• div 하위에 table 생성
• div에 width 값이나 height 값을 지정
• overflow 속성을 사용하여 스크롤 여부 속성을 지정
• 필수 : table 에 white-space:nowrap; 적용
  • 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다.

/*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤바를 표시*/
overflow:auto;

/*영역 범위의 초과 여부 상관없이 항상 테이블에 스크롤을 표시*/
overflow:scroll;

/*영역을 초과하면 초과한 부분은 사라짐*/
overflow:hidden

/*가로(너비) 스크롤만 표시.*/
overflow-x:scroll;

/*세로(높이) 스크롤만 표시.*/
overflow-y:scroll;

/*가로(너비) 스크롤만 표시하지 않음.*/
overflow-x:hidden; 

/*세로(높이) 스크롤만 표시하지 않음.*/
overflow-y:hidden;

• html

<div>
    <table>
      <tr>
        <th>제목</th>
        <th>제목</th>
      </tr>
      <tr>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
      </tr>
      <tr>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
      </tr>
    </table>
</div>

• style

div {
  width:100%;
  overflow:auto;
}
div table {
  white-space:nowrap;
  border-collapse:collapse
}
div table th,div table td {
  border:1px solid #555;
}