Source

테이블

Bootstrap을 사용한 테이블의 옵트인 스타일 지정에 대한 문서 및 예제(JavaScript 플러그인에서 널리 사용되는 경우).

예

캘린더 및 날짜 선택 도구와 같은 타사 위젯 전반에 걸쳐 표가 널리 사용되기 때문에 표를 선택하도록 설계했습니다 . 기본 클래스 .table를 any <table>에 추가한 다음 사용자 정의 스타일 또는 포함된 다양한 수정자 클래스로 확장하십시오.

가장 기본적인 테이블 마크업을 사용하여 .table부트스트랩에서 기반 테이블이 어떻게 보이는지 보여줍니다. 모든 테이블 스타일은 Bootstrap 4 에서 상속됩니다 . 즉, 중첩된 테이블은 부모와 동일한 방식으로 스타일이 지정됩니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

를 사용하여 어두운 배경에 밝은 텍스트를 사용하여 색상을 반전할 수도 있습니다 .table-dark.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

테이블 헤드 옵션

테이블 및 다크 테이블과 유사하게 modifier 클래스 를 사용 .thead-light하거나 s를 밝거나 어두운 회색으로 표시합니다..thead-dark<thead>

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

줄무늬 행

.table-striped. 안의 테이블 행에 얼룩말 줄무늬를 추가하는 데 사용 합니다 <tbody>.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

테두리가 있는 테이블

.table-bordered표와 셀의 모든 면에 테두리를 추가 합니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

테두리 없는 테이블

.table-borderless테두리가 없는 테이블에 추가 합니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderless어두운 테이블에서도 사용할 수 있습니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

호버블 행

.table-hover.NET 내의 테이블 행에서 호버 상태를 활성화하려면 추가하십시오 <tbody>.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

작은 테이블

.table-sm셀 패딩을 반으로 잘라 테이블을 더 작게 만들려면 추가하십시오 .

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

상황별 클래스

상황별 클래스를 사용하여 테이블 행 또는 개별 셀에 색상을 지정합니다.

수업 표제 표제
활동적인 셀 셀
기본 셀 셀
주요한 셀 셀
중고등 학년 셀 셀
성공 셀 셀
위험 셀 셀
경고 셀 셀
정보 셀 셀
빛 셀 셀
어두운 셀 셀 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

일반 테이블 배경 변형은 다크 테이블에서 사용할 수 없지만 텍스트 또는 배경 유틸리티 를 사용 하여 유사한 스타일을 얻을 수 있습니다.

# 표제 표제
1 셀 셀
2 셀 셀
삼 셀 셀
4 셀 셀
5 셀 셀
6 셀 셀
7 셀 셀
8 셀 셀
9 셀 셀 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .sr-only클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

.table로 래핑 하여 반응형 테이블을 생성 하여 각각 최대 576px, 768px, 992px 및 1120px의 .table-responsive{-sm|-md|-lg|-xl}각 중단점에서 테이블이 수평으로 스크롤되도록 합니다 .max-width

브라우저는 현재 범위 컨텍스트 쿼리 를 지원하지 않기 때문에 이러한 비교에 더 높은 정밀도를 가진 값을 사용하여 분수 너비(예: 높은 dpi 장치의 특정 조건에서 발생할 수 있음)가 있는 접두사 min-및max- 뷰포트 의 제한 사항을 해결합니다. .

캡션

A <caption>는 테이블의 제목과 같은 기능을 합니다. 스크린 리더를 사용하는 사용자가 테이블을 찾고 테이블의 내용을 이해하고 읽을지 여부를 결정할 수 있도록 도와줍니다.

사용자 목록
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

반응형 테이블

반응형 테이블을 사용하면 테이블을 수평으로 쉽게 스크롤할 수 있습니다. .table로 래핑 하여 모든 뷰포트에서 응답하는 테이블을 만듭니다 .table-responsive. 또는 를 사용하여 응답 테이블을 가질 최대 중단점을 선택합니다 .table-responsive{-sm|-md|-lg|-xl}.

세로 자르기/잘림

반응형 테이블은 을 사용하여 overflow-y: hidden테이블의 맨 아래 또는 맨 위 가장자리를 벗어나는 모든 콘텐츠를 잘라냅니다. 특히 드롭다운 메뉴 및 기타 타사 위젯이 잘릴 수 있습니다.

항상 반응

모든 중단점에서 .table-responsive수평으로 스크롤되는 테이블에 사용합니다.

# 표제 표제 표제 표제 표제 표제 표제 표제 표제
1 셀 셀 셀 셀 셀 셀 셀 셀 셀
2 셀 셀 셀 셀 셀 셀 셀 셀 셀
삼 셀 셀 셀 셀 셀 셀 셀 셀 셀 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

중단점 특정

.table-responsive{-sm|-md|-lg|-xl}특정 중단점까지 반응형 테이블을 생성하는 데 필요에 따라 사용 합니다. 해당 중단점 이상에서 테이블은 정상적으로 작동하며 수평으로 스크롤되지 않습니다.

이러한 표는 반응 스타일이 특정 표시 영역 너비에 적용될 때까지 깨진 것처럼 보일 수 있습니다.

# 표제 표제 표제 표제 표제 표제 표제 표제
1 셀 셀 셀 셀 셀 셀 셀 셀
2 셀 셀 셀 셀 셀 셀 셀 셀
삼 셀 셀 셀 셀 셀 셀 셀 셀 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 표제 표제 표제 표제 표제 표제 표제 표제
1 셀 셀 셀 셀 셀 셀 셀 셀
2 셀 셀 셀 셀 셀 셀 셀 셀
삼 셀 셀 셀 셀 셀 셀 셀 셀 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 표제 표제 표제 표제 표제 표제 표제 표제
1 셀 셀 셀 셀 셀 셀 셀 셀
2 셀 셀 셀 셀 셀 셀 셀 셀
삼 셀 셀 셀 셀 셀 셀 셀 셀 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 표제 표제 표제 표제 표제 표제 표제 표제
1 셀 셀 셀 셀 셀 셀 셀 셀
2 셀 셀 셀 셀 셀 셀 셀 셀
삼 셀 셀 셀 셀 셀 셀 셀 셀 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>