[HTML/CSS] 테이블(표)에 스크롤 생성하기

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 

table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,,

반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만,

가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다.

See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen.

table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다.
그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다.
overflow 속성에는 ,
overflow:auto : 해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤바를 표시
overflow:scroll : 영역 범위의 초과 여부 상관없이 항상 테이블에 스크롤을 표시
overflow:hidden : 영역을 초과하면 초과한 부분은 사라짐


가로 또는 세로 스크롤 overflow-x:scroll : 가로(너비) 스크롤만 표시.
overflow-y:scroll : 세로(높이) 스크롤만 표시.
overflow-x:hidden : 가로(너비) 스크롤만 표시하지 않음.
overflow-y:hidden : 세로(높이) 스크롤만 표시하지 않음.

또 테이블 스크롤에 필수 속성** table에 white-space:nowrap입니다.

물론 테이블마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면
nowrap를 사용하여 줄 바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보이게 됩니다.

물론, 더 좋은 방법이 있겠지만 가장 기본적이고, 간편하게 css만으로 사용할 수 있는 테이블 스크롤 처리를 알려드렸습니다!

더 좋은 테이블 처리 방법이 있다면 댓글로 알려주세요 :)!!