[HTML/CSS] 반응형 테이블 만들기

1. PC

HTML

<table class="type3">
        <colgroup>
            <col style="width:100px;">
            <col style="width:30%;">
            <col style="width:100px;">
            <col style="width:30%;">
        </colgroup>
        <thead>
            <tr>
                <th>선택</th>
                <td><input type="checkbox"></td>
                <th>이름</th>
                <td>홍길동</td>
            </tr>
            <tr>
                <th>나이</th>
                <td>20세</td>
                <th>출생지</th>
                <td>서울</td>
            </tr>
            <tr>
                <th>상세보기</th>
                <td><a href="#a">보기</a></td>
            </tr>
        </thead>
    </table>

 

CSS

 	table.type3 {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 40px;
        }

        table.type3 tr {
            border: 1px solid #000;
        }

        table.type3 th,
        table.type3 td {
            text-align: center;
            padding: 5px 0px;
        }

        table.type3 th {
            background: #000;
            color: #fff;
        }

 

2. Moblie

@media (max-width:600px) {

        table.type3 colgroup {
            display: none;
        }

        table.type3 th,
        td {
            display: block;
        }


}

모바일에서는 테이블 내용의 가독성을 위하여 th, td 요소를 block으로 만들어 세로로 한 줄 처리한다.