[CSS#1] Responsive Table and CSS 테이블 코드를 반응형으로 만들기

웹 퍼블리싱을 하다 보면 꼭 고민에 빠지게 하는 것들이 있습니다. 

백엔드 작업시에는 DB 접속을 최소한으로 줄이는 최적화 과정에서 주로 고민이 많고요. 
프론트엔드 작업시에는 css 를 이용해 html 코딩을 어떻게 하면 효율적으로 할 수 있을가를 고민하게 됩니다. 

 

Responsive Table with CSS

 

그 중에서도 프론트엔드 작업시, 테이블 처리 문제는 없어지지 않는 난제이지요. 

TABLE 테이블 코딩은 모바일과 반응형웹의 시대로 넘어오면서 정말 계륵과 같은 존재가 되어버렸습니다. 

그동안 저도 여러가지 방법을 사용했었는데요.

1. desktop 버전에서는 table 코딩, mobile 버전에서는 div 코딩으로 분기하는 방법
2. table 코딩을 사용하되, 모바일에서는 display:none 을 사용하여 모바일에 그나마 최적화하는 방법
3. desktop, mobile 모두 div 코딩하고 모바일에서는 가릴 부분을 display:none 사용하는 방법

그 외에도 다른 방법들이 있겠지만, 저는 주로 이렇게 3가지를 써왔습니다. 
생각해보니 최근에는 2번 방법만 써왔네요.

오늘 소개하고 싶은 방법은 완전히 새로운 방법입니다. 

Table 코딩을 그대로 사용하되, Css를 이용해 모바일에서도 최적화 가능한 방법이 있었거든요. 

아래에 캡쳐 이미지와 css, html 코드를 올려둡니다. 
마지막에는 jsfiddle 예제 페이지 링크도 걸어두겠습니다. 

 

---

 

Desktop 버전의 Table 코딩

Desktop 버전의 Table 코딩

 

Mobile 버전의 Table 코딩

Mobile 버전의 Table 코딩

 

---

 

CSS 코드

/* common */
.res_tbl_wrap {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    border-top: 2px solid #121212;
}
.res_tbl_wrap table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.res_tbl_wrap table thead tr th {
    border-bottom: 1px solid #121212;
}
.res_tbl_wrap table thead tr th,
.res_tbl_wrap table tbody tr td {
    text-align: left;
    padding: 0.8125vw 1.25vw;
    font-size: 15px;
    font-size: 1.3vw;
    line-height: 1.375vw;
}
.res_tbl_wrap table tbody tr td {
    border-bottom: 1px solid #efefef;
}

/* desktop only */
@media screen and (min-width: 1200px) {
    .res_tbl_wrap table thead tr th,
    .res_tbl_wrap table tbody tr td {
        padding: 12px 20px;
        font-size: 16px;
        line-height: 22px;
    }
}

/* mobile only */
@media screen and (max-width: 990px) {
    .res_tbl_wrap table col {
        width: 100% !important;
    }
    .res_tbl_wrap table thead {
        display: none;
    }
    .res_tbl_wrap table tbody tr {
        border-bottom: 1px solid #efefef;
    }
    .res_tbl_wrap table tbody tr td {
        width: 100%;
        display: flex;
        margin-bottom: 2px;
        padding: 5px;
        border-bottom: none;
        font-size: 14px;
        line-height: 18px;
    }
    .res_tbl_wrap table tbody tr td:first-child, 
    .res_tbl_wrap table tbody tr th:first-child {
        padding-top: 16px;
    }
    .res_tbl_wrap table tbody tr td:last-child, 
    .res_tbl_wrap table tbody tr th:last-child {
        padding-bottom: 15px;
    }
    .res_tbl_wrap table tbody tr td:before {
        display: inline-block;
        margin-right: 12px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
        flex: 0 0 100px;
        font-weight: 700;
        content: attr(data-label);
    }
}

 

HTML 코드

<div class="res_tbl_wrap">
    <table>
      <colgroup>
        <col style="width:10%" >
        <col style="width:20%" >
        <col style="width:40%" >
        <col style="width:15%" >
        <col style="width:15%" >
      </colgroup>
      <thead>
        <tr>
          <th>분류</th>
          <th>제품명</th>
          <th>사이즈</th>
          <th>다운로드</th>
          <th>다운로드</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row" data-label="분류">분류 A</td>
          <td data-label="제품명">제품 AA</td>
          <td data-label="규격">A 100</td>
          <td data-label="다운로드 1"><a href="#">다운로드 1</a></td>
          <td data-label="다운로드 2"><a href="#">다운로드 2</a></td>
        </tr>
        <tr>
          <td scope="row" data-label="분류">분류 B</td>
          <td data-label="제품명">제품 BB</td>
          <td data-label="규격">B 200</td>
          <td data-label="다운로드 1"><a href="#">다운로드 1</a></td>
          <td data-label="다운로드 2"><a href="#">다운로드 2</a></td>
        </tr>
      </tbody>
    </table>
</div>

 

---

 

Jsfiddle 예제 바로 가기 => https://jsfiddle.net/hijobs/6y8ktur2/35

Responsive Table & Css - JSFiddle - Code Playground