반응형디자인을 고려한 테이블 레이아웃

스마트폰 대응, 반응형이 당연시 되어진 요즘은 코딩할 때 테이블에 대한 고민을 많이 하게 됩니다.

회사소개 등의 간단한 테이블이면 괜찮겠지만, 정보량이 많은 테이블은 PC화면 그대로 축소한 상태로 스마트폰 화면에서 보게 되면…!!! 반응형 테이블의 처리는 Responsive Tables같이 js를 사용하는 방법들이 여럿 있지만, 이 내용에서는 CSS로 처리 가능한 방법을 소개합니다.

각 데모를 확인하시고 브라우저를 확대 축소 해보세요.

2셀의 경우

주로 2셀로 만들어지는 회사개요나, 폼에서 사용하기 편할 것 같습니다.
아래 데모에서 html, css를 확인하실 수 있습니다.

See the Pen responsive_table_demo1 by nanati (@nanati) on CodePen.

가로로 긴 경우 overflow-x와 inline-block을 사용

th요소가 옆으로 긴 경우의 테이블도 만들 때가 있죠. 옆으로 긴 테이블은 어떻게 처리할까요? 데모를 확인해 보세요.

See the Pen responsive_table_demo2 by nanati (@nanati) on CodePen.

list-item을 사용해 리스트풍으로

td항목이 리스트 요소로 나열된 경우, 아래와 같은 방식이 효율적이라고 생각됩니다.

See the Pen responsive_table_demo3 by nanati (@nanati) on CodePen.

마치며

CSS로 반응형 테이블 디자인 하는 방법을 세가지 소개해 드렸습니다.
위 내용은 IE9이상 대응이 가능합니다. (이제 슬슬 하위 브라우저는 버립시다.)
반응형 디자인이 아니라 스마트폰 용으로 따로 만드는 거라면 display:box;를 사용하는 방법도 있으므로 좀 더 세련된 코드를 작성할 수 있습니다.