반응형 테이블

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

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

제목 반복형 (또는 Reflow table)

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

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

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 하드코딩 문제점 부분 해결)입니다.

   

       
2311
       
Lorem
       
Ipsum dolor
       
22
       
Web designer
       
1234567890
   

.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

가로 스크롤 제공형

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

@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 링크)

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

관련자료

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

선택/생략형

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

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

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

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

관련자료

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)

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

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

관련자료

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. 반응형 테이블