반응형 테이블(Responsive Table)

이번에 팀 프로젝트를 진행하면서 관리자 페이지를 만들었는데, 유저들의 정보를 테이블로 보여주고 검색이나 수정 및 삭제 기능을 구현하였다. 기능을 모두 구현하고 반응형 웹을 적용하려고 보니 칼럼이 많은 테이블을 어떻게 처리해야 할지 고민이 되었다.

 

반응형 테이블의 경우 대체로 두 가지 형태로 보여준다고 한다.

 

테이블

 

 

 

 

첫 번째는 화면이 작아지면 테이블에 가로 스크롤을 추가하여 스크롤을 통해 다 볼 수 있게 하는 방법

overflow-x:auto;

 

 

 

두 번째는 큰 화면에 제목(thead)을 화면이 작아지면 각각의 행마다 모두 추가해주는 방법

// 기존 thead 숨김
thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

// 열에 thead 값 추가
  td:nth-of-type(1):before { content: "이름"; }
  td:nth-of-type(2):before { content: "팀"; }
  ...
  ...

 

 

---

개인적으로는 모바일 같이 작은 화면에서는 좌, 우로 스크롤하는 것보다는 상, 하로 스크롤하는 것이 사용자 경험 측면에서 더 좋다고 생각하여 이번 프로젝트에는 두 번째 방법을 적용하였다.