-
반응형 테이블(Responsive Table)Note 2021. 8. 6. 12:04
이번에 팀 프로젝트를 진행하면서 관리자 페이지를 만들었는데, 유저들의 정보를 테이블로 보여주고 검색이나 수정 및 삭제 기능을 구현하였다. 기능을 모두 구현하고 반응형 웹을 적용하려고 보니 칼럼이 많은 테이블을 어떻게 처리해야 할지 고민이 되었다.
반응형 테이블의 경우 대체로 두 가지 형태로 보여준다고 한다.
테이블
첫 번째는 화면이 작아지면 테이블에 가로 스크롤을 추가하여 스크롤을 통해 다 볼 수 있게 하는 방법
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: "팀"; } ... ...
개인적으로는 모바일 같이 작은 화면에서는 좌, 우로 스크롤하는 것보다는 상, 하로 스크롤하는 것이 사용자 경험 측면에서 더 좋다고 생각하여 이번 프로젝트에는 두 번째 방법을 적용하였다.
'Note' 카테고리의 다른 글
이벤트 루프 (0) 2021.08.13 브라우저 작동 원리 (0) 2021.08.10 페이지네이션(Pagination) (0) 2021.08.02 무한 스크롤(Infinite Scroll) (0) 2021.07.26 DNS_PROBE_FINISHED_NXDOMAIN (0) 2021.05.02