반응형 테이블을 별도의 강좌로 만들기에는 너무 간단한 것같아서, 간단글로 정리해봤습니다.

반응형 테이블

주로 <table>로 구성되는 (데이터) 테이블은, 가로길이가 긴 경우 폭이 좁은 모바일 화면에서 보여주기 쉽지 않습니다. 대부분의 경우, 항목/필드를 열 (세로방향)로 가르고, 목록/데이터는 행 (가로방향)로 보여주게 되는데, 항목이 많아지게 되면 모바일 화면에서 한꺼번에 표시할 수 없습니다. 그런 경우, (기기에 따라서) 테이블의 일부만 보이거나, 테이블 전체를 보여주는 대신 구체적인 내용은 줌을 해야 보이게 됩니다.

출처: Chris Coyier - http://css-tricks.com/responsive-data-tables/

반응형 테이블은, 이러한 문제점을 해결하기 위하여, 테이블 형태를 조금 바꾸지만, 원래의 테이블 사용 목적에 맞추어, 조정하는 것을 뜻합니다. 이에 대해서, Chris Coyier가 정리한 글을 기반으로, 그 유형을 다시 정리해봤습니다.

제목 반복형 (또는 Reflow table)

항목이 많아질때 테이블의 폭이 넓어지는 것을 피하기 위한 방법으로, 매 행의 데이터를, 항목별 제목을 반복해가면서 보여주는 형태로 바꾸는 것입니다.

아래는 Chris Coyier의 해결 방법입니다. 보시는대로, 기존에는 한 줄로 나오던 한 사람의 내용을, 항목별 내용으로 세로로 보여주고, 매 사람마다 다른 배경색을 사용해서 가독성을 높이고 있습니다.

출처: Chris Coyier - http://css-tricks.com/responsive-data-tables/

Chris Coyier가 사용한 방법은, 테이블의 모든 요소를 block으로 바꾸고, 맨 상단 행인 항목별 제목을 가리고, 적절한 제목이 붙은 <td>를 한줄로 표기하는 것입니다.

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

        // Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr { 
                display: block; 
        }
        
        // Hide table headers (but not display: none;, for accessibility) */
        thead tr { 
                position: absolute;
                top: -9999px;
                left: -9999px;
        }
        
        tr { border: 1px solid #ccc; }
        
        td { 
                // Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee; 
                position: relative;
                padding-left: 50%; 
        }
        
        td:before { 
                // Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%; 
                padding-right: 10px; 
                white-space: nowrap;
        }
        
        //
        Label the data
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Porn Name"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

이 방법의 단점은,

1. IE에서는 table 요소들을 display:block으로 설정하면 의도치 않은 결과가 나올 수 있고
2. 각 항목의 제목들을 :before 로 하드코딩 해야 한다

는 점입니다.

비슷한 접근 방법으로 Mobifreaks의 방법도 있습니다. 다른 점은, table요소들 대신에 table display 특성들로 설정된 div 요소들을 이용하여 테이블을 구성하는 것 (IE 문제점 해결)과, 항목제목을 :before에 하드코딩하는 것이 아니라, div의 data-label 을 통해서 넘겨주는 것 (CSS 하드코딩 문제점 부분 해결)입니다.

.table{
        display:table;
}
.table-head{
        display:table-header-group;
}
.row{
        display:table-row;
}
.column{
        display:table-cell;
}
// Responsive table */
@media all and (max-width: 640px){
        .table,
        .row,
        .column,
        .column:before{
                display:block;        // Converts a table, table row, table column and table column:before into a block element */
        }
        .table-head{
                position:absolute;        // Hides table head but not using display none */
                top:-1000em;
                left:-1000em;
        }
        :
        .column:before{ // prints the value of data-label attribute before the column data */
                font-weight:bold;
                padding-right:20px;
                font-size:12px;
                content:" "attr(data-label)" //";        // call the attribute value of data-label and adds a string // */
        }
}

관련자료

1. css-tricks: http://css-tricks.com/responsive-data-tables/
2. Mobifreaks: http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/
3. Derek Pennycuffs’ mobile first version: http://jsbin.com/arixic

가로 스크롤 제공형

가로로 스크롤을 제공하여, 필요한 공간을 확보하는 형태입니다. 아래는 테이블의 행과 열을 교체하여, 항목제목은 항상 좌측에 고정하고, 내용을 가로로 스크롤 할 수 있도록 하는 방법입니다.

출처: David Bushell - http://dbushell.com/2012/01/05/responsive-tables-2/

@media only screen and (max-width: 40em) { //640*/
        #rt1 { display: block; position: relative; width: 100%; }
        #rt1 thead { display: block; float: left; }
        #rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
        #rt1 thead tr { display: block; }
        #rt1 th { display: block; }
        #rt1 tbody tr { display: inline-block; vertical-align: top; }
        #rt1 td { display: block; min-height: 1.25em; }
}

참고로 이 방법은, 아이토론의 시스템 설명 페이지에서 토론레벨별 권한/제약을 보여지는 데에 사용되었습니다.

각각 테블릿까지 보이는 테이블과, 모바일에서 보이는 반응형 테이블입니다.

또다른 방법으로는, 원 테이블의 행과 열을  그대로두고 항목들을 스크롤 할 수 있도록 제공하는 것입니다. 아래는 zurb가 구현한 가로 스크롤형 반응형 테이블의 구동 원리를 보여주는 그림입니다. zurb는 이를 CSS와 js 화일로 해서 제공하고 있습니다. (github 링크)

출처: zurb blog - http://www.zurb.com/article/982/a-new-take-on-responsive-tables

두가지 방법 모두 사용처가 다르기에, 다른 클래스로 지정해서 사용하거나, 사용자가 선택할 수 있도록 제공하는 것도 좋을것 같습니다.

관련자료

1. David Bushell: http://dbushell.com/2012/01/05/responsive-tables-2/
2. zurb: http://www.zurb.com/playground/responsive-tables

선택/생략형

또다른 접근 방법으로는, 일부 항목(열)을 선택적으로 가리거나 생략하는 방법입니다.

다음은, 각각 원래 테이블에서 점점 작아지는 스크린에서 보이는 테이블을 보이고 있습니다.

출처: Irishstu.com(Stewart Curry) - http://www.irishstu.com/stublog/2011/12/12/tables-and-responsive-design/

원리는 간단하게, 생략하기 원하는 항목(열)의 th를 display:none; visibility:hidden; 로 가리는 것입니다.

하지만, 때로는 사용자가 보기 원하는 항목을 다를 수도 있기에, 사용자가 직접 항목을 선택하는 방법도 제안되었습니다. 반응형 웹 기법/기술을 선도하고 있는 filament group에서 제안한 방법은, 사용자에게 선택권을 주는 방법입니다. 자세한 코드는 원글에 자세히 설명되어 있으니 직접 참조하세요.

출처: filament group - http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

관련자료

1. Stewart Curry: http://www.irishstu.com/stublog/2011/12/13/tables-responsive-design-part-2-nchilds/
2. filament group: http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

구조변경형

마지막으로, 원래의 테이블 구조를 포기하고 다른 형태로 변형하는 접근방법도 있습니다.

우선, 간단하게 테이블의 구조를 없애고, 각 항목(열)에 해당하는 내용을 색으로 보여주는 방법입니다. (Brad Czerniak’s Rainbow table)

출처: css-tricks.com - http://css-tricks.com/responsive-data-table-roundup/

또다른 방법으로, 테이블을 일종의 썸네일로 보여주고, 한번더 클릭하면 별도의 화면에서 전체 내용을 보여주는 방법입니다. ( Scott Jehl’s 썸네일 방식: http://jsbin.com/apane6/14 )

출처: css-tricks.com - http://css-tricks.com/responsive-data-table-roundup/

마지막으로 가장 창의적인 방법으로, 숫자가 들어있는 테이블을 자동으로 파이차트로 변형하는 방법입니다. ( Scott Jehl’s 그래프 전환: http://jsbin.com/emexa4 ) 당연히 숫자내용이 아닌 테이블의 경우는 적용할 수 없습니다.

출처: css-tricks.com - http://css-tricks.com/responsive-data-table-roundup/

관련자료

1. Brad Czerniak’s Rainbow table (테이블 형식을 포기, 각 열을 색으로 구분): http://hawidu.com/2011/04/27/another-responsive-data-tables-approach/
2. Scott Jehl’s 그래프 전환: http://jsbin.com/emexa4
3. Scott Jehl’s 썸네일 방식: http://jsbin.com/apane6/14

조합/정리된 구현

그밖에 이러한 기법들을 한 곳에 모아서 정리한 것들도 있습니다.

1. bootstrap 기반으로 1) 생략형, 2) 행열 교체후 가로스크롤 제공형, 3) 제목반복형을 구현+정리함: http://elvery.net/demo/responsive-tables/
2. jquerymobile에서 제공되는 1) 제목반복형 (reflow table), 2) 선택형의 여러 적용사례 들을 구현함: http://jquerymobile.com/branches/tables/docs/tables/

강좌 내용 원본 링크

구글 문서 링크

B. 반응형 테이블