CodeGym/행동/Frontend SELF KO/반응형 테이블

반응형 테이블

사용 가능

9.1 스크롤

테이블은 구조화된 데이터를 표시하는 데 자주 사용되지만, 작은 화면의 기기에서는 표시하기 어려울 수 있어. 반응형 테이블은 모바일 폰과 태블릿을 포함한 다양한 기기에서 데이터를 더 잘 보고 상호작용할 수 있게 해줘. 반응형 테이블을 만드는 몇 가지 기술을 살펴보자.

반응형 테이블을 만드는 간단한 방법 중 하나는 수평 스크롤 추가하기야. 이 방법은 테이블 구조를 유지하고 좁은 화면에서 사용자가 데이터를 수평으로 스크롤할 수 있게 해줘.

예시:

CSS
.table-container {
  overflow-x: auto;
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스크롤이 있는 반응형 테이블</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
  <table>
    <thead>
    <tr>
      <th>열 1</th>
      <th>열 2</th>
      <th>열 3</th>
      <th>열 4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>데이터 1</td>
      <td>데이터 2</td>
      <td>데이터 3</td>
      <td>데이터 4</td>
    </tr>
    <!-- 다른 행들 -->
    </tbody>
  </table>
</div>
</body>
</html>

코드 설명:

  • .table-container: 테이블이 컨테이너의 너비를 초과할 경우 수평 스크롤을 추가해줘
  • table: 테이블의 너비를 100%로 설정하고 셀의 경계를 결합해줘

9.2 열 숨김

이 방법은 좁은 화면에서 덜 중요한 열을 숨겨 주요 데이터를 보이게 해주는 거야. 이걸 미디어 쿼리로 할 수 있어.

예시:

CSS
@media (max-width: 600px) {
  .hide {
    display: none;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>열 숨김이 있는 반응형 테이블</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <table>
      <thead>
      <tr>
        <th>열 1</th>
        <th>열 2</th>
        <th class="hide">열 3</th>
        <th class="hide">열 4</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
        <td class="hide">데이터 3</td>
        <td class="hide">데이터 4</td>
      </tr>
      <!-- 다른 행들 -->
      </tbody>
    </table>
  </body>
</html>

코드 설명:

  • .hide: 미디어 쿼리를 사용해 너비 600px 미만의 화면에서 특정 열을 숨겨줘
  • table: 테이블의 너비를 100%로 설정하고 셀의 경계를 결합해줘

9.3. 블록으로 쌓기

블록으로 쌓기는 테이블 행을 세로로 블록 형태로 바꿔서 좁은 화면에서 아래로 쌓이게 하는 방법이야. 모바일 기기에서 테이블을 더 읽기 쉽게 해줘.

예시:

CSS
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    display: none;
  }

  td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
  }
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블록으로 쌓는 반응형 테이블</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <table>
      <thead>
      <tr>
        <th>열 1</th>
        <th>열 2</th>
        <th>열 3</th>
        <th>열 4</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td data-label="열 1">데이터 1</td>
        <td data-label="열 2">데이터 2</td>
        <td data-label="열 3">데이터 3</td>
        <td data-label="열 4">데이터 4</td>
      </tr>
      <!-- 다른 행들 -->
      </tbody>
    </table>
  </body>
</html>

코드 설명:

  • 미디어 쿼리: 너비 600px 미만의 화면에서 테이블을 블록 요소로 변환해
  • td::before: 데이터 컨텍스트를 유지하기 위해 셀 값 앞에 열 이름을 가진 가상 요소를 추가해줘

9.4. 카드 레이아웃으로 변환

이 방법은 테이블의 각 행을 좁은 화면에서 개별 카드로 변환하는 거야. 모바일 기기에서 데이터 읽기 쉽게 해줘.

예시:

CSS
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    display: none;
  }

  tr {
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
  }

  td {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border: none;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 10px;
  }
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>카드 레이아웃이 있는 반응형 테이블</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <table>
      <thead>
      <tr>
        <th>열 1</th>
        <th>열 2</th>
        <th>열 3</th>
        <th>열 4</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td data-label="열 1">데이터 1</td>
        <td data-label="열 2">데이터 2</td>
        <td data-label="열 3">데이터 3</td>
        <td data-label="열 4">데이터 4</td>
      </tr>
      <!-- 다른 행들 -->
      </tbody>
    </table>
  </body>
</html>

코드 설명:

  • 미디어 쿼리: 너비 600px 미만의 화면에서 테이블을 블록 요소로 변환하고 카드 형태로 만들어줘
  • td::before: 데이터 컨텍스트를 유지하기 위해 셀 값 앞에 열 이름을 가진 가상 요소를 추가해줘

9.5 CSS Frameworks 사용하기

Bootstrap과 같은 많은 CSS 프레임워크는 반응형 테이블을 만드는 데 필요한 내장 솔루션을 제공해. 이런 프레임워크를 사용하면 과정을 단순화하고 준비된 스타일과 구성 요소를 제공해줘.

Bootstrap 사용 예시:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap과 함께하는 반응형 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <table class="table table-responsive">
        <thead>
        <tr>
          <th>열 1</th>
          <th>열 2</th>
          <th>열 3</th>
          <th>열 4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>데이터 1</td>
          <td>데이터 2</td>
          <td>데이터 3</td>
          <td>데이터 4</td>
        </tr>
        <!-- 다른 행들 -->
        </tbody>
      </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

코드 설명:

  • table.table-responsive: 좁은 화면에서 테이블에 수평 스크롤을 추가하는 Bootstrap 클래스야
  • container: 컨테이너의 최대 너비를 설정하고 중앙에 배치해주는 Bootstrap 클래스야
1
과제
Frontend SELF KO,  레벨 26레슨 3
잠금
반응형 테이블
반응형 테이블
1
과제
Frontend SELF KO,  레벨 26레슨 3
잠금
열 숨기기
열 숨기기
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다