반응형 table 정리 (responsive table 정리)

반응형웹 프로젝트를 하게 되면 컬럼이 많은 테이블(responsive table)을 모바일에서 어떻게 표현을 해야 될지 고민을 하게 되는 경우가 있는대,

구글에 반응형 테이블을 검색하면 대체로 2가지의 형태로 모바일에서 보여주는 것을 확인 하였는데,

나도 다 검색을 통하여서 이 방법을 적용하여 프로젝트 를 한 경험이 있다.

첫번째 방법은 모바일일때는 테이블에 가로 스크롤을 달아 화면보다 열이 많아도 손으로 넘겨서 볼 수 있도록 하는 방법과

두번째 방법은 테이블의 각 열에 해당하는 제목들을 행 마다 다 표현 해 주는 방법이다.

말로 풀어쓰면 이해 하기 힘들 수 있으니 아래에 이미지를 보면 이해가 갈 것입니다.

위에 이미지를 보면 PC의 thead 제목이 모바일에서는 각각의 tr에 노출되게 하는 것입니다.

컬럼이 많은 테이블(responsive table)들은 위에 말한 2가지 방법 말고 다르게 처리하는 방법은 나는 아직 경험 하지 못했습니다.;(위 방법 말고도 아시는분들은 공유 부탁드립니다.;;)

저는 위 2가지 방법으로 프로젝트에서 사용하고 있습니다.

html, css 소스도 

첫번째 방법은  https://www.w3schools.com/howto/howto_css_table_responsive.asp 에

두번째 방법은  https://css-tricks.com/responsive-data-tables/ 에 

있어서 그대로 가져 와서 저는 사용하는 편이라 공수도 오래 걸리지 않고 작업 하는 편입니다.

간혹 공유되어 있는 소스로 하지 않고 독창적으로 생각해서 작업한 반응형 테이블 결과물들을 본적이 있는데, 그렇게까지 생각해서 코딩을 하는데 시간이 많이 소요 될 뿐만 아니라 예상치 못한 문제점 들이 발생 하는 것을 본 적이 있습니다.

저의 개인적인 생각은 다 알려진 방법으로 신속히 빨리 작업물을 만드는 것이 좀 더 효율적이라고 생각합니다.