반응형 테이블
-
반응형 table 정리 (responsive table 정리)html, css/반응형 웹 2018. 10. 25. 17:11
반응형웹 프로젝트를 하게 되면 컬럼이 많은 테이블(responsive table)을 모바일에서 어떻게 표현을 해야 될지 고민을 하게 되는 경우가 있는대,구글에 반응형 테이블을 검색하면 대체로 2가지의 형태로 모바일에서 보여주는 것을 확인 하였는데,나도 다 검색을 통하여서 이 방법을 적용하여 프로젝트 를 한 경험이 있다. 첫번째 방법은 모바일일때는 테이블에 가로 스크롤을 달아 화면보다 열이 많아도 손으로 넘겨서 볼 수 있도록 하는 방법과 두번째 방법은 테이블의 각 열에 해당하는 제목들을 행 마다 다 표현 해 주는 방법이다.말로 풀어쓰면 이해 하기 힘들 수 있으니 아래에 이미지를 보면 이해가 갈 것입니다. 위에 이미지를 보면 PC의 thead 제목이 모바일에서는 각각의 tr에 노출되게 하는 것입니다. 컬럼이..