일반적으로 테이블은 일련의 열이 있는 행 간의 관계를 설명합니다. 데이터를 구성하고 설명하는 좋은 방법입니다.
부트스트랩은 콘텐츠를 매우 빠르게 생성하는 데 도움이 되는 CSS 프레임워크입니다. 이 기사에서는 부트스트랩 설정 방법을 검토하고 테이블이 필요한 이유를 배우고 부트스트랩 프레임워크를 사용하여 작동하는 테이블의 몇 가지 예를 살펴봅니다.
시작하기
웹 페이지에서 모달을 볼 수 있도록 하려면 적절한 종속성이 있는지 확인하십시오. 이 데모에서는 Bootstrap, Popper.JS 및 jQuery가 필요하지 않지만 필요한 다른 구성 요소와 함께 작업할 수 있으므로 어쨌든 추가하는 것이 좋습니다. 모든 종속성을 가져오는 데 도움이 필요한 경우 Bootstrap의 빠른 시작 페이지로 이동하십시오.
필요한 패키지를 연결하는 방법은 사용자에게 달려 있지만 가장 쉽고 초보자 친화적인 방법은 jQuery, Popper.js 및 Bootstrap용 콘텐츠 전달 네트워크인 CDN을 사용하는 것입니다. <script> 순서에 주의하세요. 태그 – 여기에서 주문이 중요합니다.
표를 사용하는 경우
한 번에 많은 데이터를 집계하고 싶을 때 테이블을 사용하세요. 반응형 테이블을 쉽게 만들고 싶을 때 부트스트랩 테이블을 사용하십시오. 부트스트랩은 테이블의 기본 HTML 구조를 사용합니다. CSS와 사용자 정의 스타일을 통합하여 웹 사이트에 대한 사용자 정의 반응형 테이블을 통합하기만 하면 됩니다.
부트스트랩을 사용하여 테이블 생성
테이블은 전통적으로 HTML과 CSS로 작성됩니다. 이렇게 하면 화면에 테이블의 기본 구조와 스타일이 표시됩니다. 우리는 Bootstrap을 사용하여 반응형 디자인을 만들고 신속하게 준비할 수 있으므로 애플리케이션에 대해 수행할 항목 목록에서 우선 순위가 더 높은 항목으로 이동할 수 있습니다.
부트스트랩을 사용할 때 테이블을 적절하게 구성할 수 있도록 문서를 준비하십시오. 모달 또는 탐색 모음과 달리 테이블이 다른 점은 작동하기 위해 반드시 JavaScript에 의존하지 않는다는 점입니다. 따라서 실제 구성 요소 자체보다는 콘텐츠 기능으로 더 많이 취급됩니다. 구성 요소 메뉴가 아닌 사이드바의 콘텐츠 메뉴에서 표를 만드는 방법에 대한 정보를 찾을 수 있습니다.
기본 구조부터 시작하겠습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<thead>
<tr>
<th>Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>
위의 마크업을 실행하면 머리글과 음료, 가격 및 행 번호를 설명하는 여러 행이 있는 매우 기본적인 테이블이 표시됩니다. 전체 문서에 대해 부트스트랩으로 설정한 것 외에는 스타일 지정이 없습니다.
표에 스타일을 추가하려면 .table을 추가하기만 하면 됩니다. <table>에 대한 클래스 태그.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>
이것은 테이블에 매우 기본적인 스타일과 응답성을 추가합니다. 필요에 맞게 스타일을 사용자 지정할 수 있는 다른 방법을 살펴보겠습니다.
기본 색상 반전
.table-dark 추가 <table>의 클래스 이름 목록에 있는 .table 외에 태그를 사용하여 테이블의 기본 색 구성표를 어둡게 변경합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> 어둡고 밝은 것 외에 기본 부트스트랩 색상 속성을 사용하여 컨텍스트 클래스(예:.table-primary, table-danger, table-success 등)를 제어할 수도 있습니다.
스타일 옵션
본문과 별도로 테이블 헤드의 색 구성표를 제어하려면 .thead-dark를 추가하여 제어할 수 있습니다. 또는 .thead-light <thead>로 클래스 속성.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-danger">
<thead class="thead-light">
<th>Bootstrap Table Demo</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> 줄무늬
.table-striped 추가 <table> 태그를 사용하여 테이블의 다른 모든 행의 색상을 조정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-striped table-warning">
<thead class="thead-light">
<th>Bootstrap Table Demo With Stripes</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> 테두리
.table-bordered를 사용하여 각 셀의 모든 면에 테두리를 추가하고 .table-borderless를 사용하여 각 셀의 모든 면에서 모든 테두리를 제거합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<table class="table table-primary table-borderless">
<thead class="thead-light">
<th>Bootstrap Table Demo Without Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> 호버
.table-hover가 <table>의 클래스 속성에 추가되었습니다. 태그는 <tbody>의 모든 행을 허용합니다. 호버블이 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html> 반응형 테이블
<table> 캡슐화 <div> 사용 모든 중단점에서 테이블이 응답하도록 만들기 위해 클래스 이름 .table-responsive를 사용합니다. 이렇게 하면 내용이 테이블 크기에 따라 잘린 경우 기본적으로 테이블을 가로로 스크롤할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html> 결론
HTML과 함께 부트스트랩을 사용하여 테이블을 사용자 정의하는 방법에는 여러 가지가 있습니다. 이러한 방법을 사용하여 Bootstrap 테이블의 스타일을 지정하는 방법을 익힌 후 사용자 지정 가능한 스타일을 사용해 보십시오!
.thead-dark를 추가하여 제어할 수 있습니다. 또는 .thead-light <thead>로 클래스 속성. .table-striped 추가 <table> 태그를 사용하여 테이블의 다른 모든 행의 색상을 조정합니다. <table>의 클래스 속성에 추가되었습니다. 태그는 <tbody>의 모든 행을 허용합니다. 호버블이 됩니다. <table> 캡슐화 <div> 사용 모든 중단점에서 테이블이 응답하도록 만들기 위해 클래스 이름 .table-responsive를 사용합니다. 이렇게 하면 내용이 테이블 크기에 따라 잘린 경우 기본적으로 테이블을 가로로 스크롤할 수 있습니다.