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 클래스야
GO TO FULL VERSION