JAY DESIGN

테이블 가로 스크롤 컨테이너

table__wrap 컨테이너 안의 테이블에 인라인으로 min-width를 추가하면, ( 예 style="min-width:768px;" ) 해당 사이즈 이하로는 테이블 가로 스크롤이 생긴다 (브라우저 가로를 축소하여 예시 확인 가능).

Table head 1	Table head 2	Table head 3	Table head 4	Table head 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5

<div class="table__wrap">
    <table class="table" style="min-width:768px;">
        <tr>
            <th>Table head 1</th>
            <th>Table head 2</th>
            <th>Table head 3</th>
            <th>Table head 4</th>
            <th>Table head 5</th>
        </tr>
        <tr>
            <td>Table text 1</td>
            <td>Table text 2</td>
            <td>Table text 3</td>
            <td>Table text 4</td>
            <td>Table text 5</td>
        </tr>
        <tr>
            <td>Table text 1</td>
            <td>Table text 2</td>
            <td>Table text 3</td>
            <td>Table text 4</td>
            <td>Table text 5</td>
        </tr>
        <tr>
            <td>Table text 1</td>
            <td>Table text 2</td>
            <td>Table text 3</td>
            <td>Table text 4</td>
            <td>Table text 5</td>
        </tr>
    </table>
</div>

테이블 가로 스크롤 컨테이너 2

table__wrap 컨테이너 안의 테이블에 table--straight클래스를 추가하면, td 내의 텍스트 길이에 맞추어(텍스트 한줄로 유지) 테이블 가로스크롤 생성.

Table head 1	Table head 2	Table head 3	Table head 4	Table head 5	Table head 6	Table head 7	Table head 8
2020-0406-3245689	Lorem ipsum dolor sit amet	adipiscing elit. Aenean 36	2020-0406-3245689	adipiscing elit. Aenean 36	2020-0406-3245689	2020-0406-3245689	2020-0406-3245689
2020-0406-3245689	Lorem ipsum dolor sit amet	adipiscing elit. Aenean 36	2020-0406-3245689	adipiscing elit. Aenean 36	2020-0406-3245689	2020-0406-3245689	2020-0406-3245689
2020-0406-3245689	Lorem ipsum dolor sit amet	adipiscing elit. Aenean 36	2020-0406-3245689	adipiscing elit. Aenean 36	2020-0406-3245689	2020-0406-3245689	2020-0406-3245689

<div class="table__wrap">
    <table class="table table--straight">
        <tr>
            <th>Table head 1</th>
            <th>Table head 2</th>
            <th>Table head 3</th>
            <th>Table head 4</th>
            <th>Table head 5</th>
            <th>Table head 6</th>
            <th>Table head 7</th>
            <th>Table head 8</th>
        </tr>
        <tr>
            <td>2020-0406-3245689</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
        </tr>
        <tr>
            <td>2020-0406-3245689</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
        </tr>
        <tr>
            <td>2020-0406-3245689</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>adipiscing elit. Aenean 36</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
            <td>2020-0406-3245689</td>
        </tr>
    </table>
</div>

테이블 브레이크 컨테이너

가로값 540px 이하 소형 디바이스에서 각 셀이 일렬로 정렬된다(브라우저 가로를 축소하여 예시 확인 가능). th / td 또는 th / td / th / td 나열 테이블에만 적합하다.

Table head 1	Table text 1	Table head 2	Table text 2
Table head 3	Table text 3	Table head 4	Table text 4
Table head 5	Table text 5	Table head 6	Table text 6

<table class="table table__td-left table--break">
    <colgroup>
        <col style="width:20%;">
        <col style="width:30%;">
        <col style="width:20%;">
        <col style="width:30%;">
    </colgroup>
    <tr>
        <th>Table head 1</th>
        <td>Table text 1</td>
        <th>Table head 2</th>
        <td>Table text 2</td>
    </tr>
    <tr>
        <th>Table head 3</th>
        <td>Table text 3</td>
        <th>Table head 4</th>
        <td>Table text 4</td>
    </tr>
    <tr>
        <th>Table head 5</th>
        <td>Table text 5</td>
        <th>Table head 6</th>
        <td>Table text 6</td>
    </tr>
</table>