주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

테이블

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

이 페이지에서

개요

<table>캘린더 및 날짜 선택기와 같은 타사 위젯 전반에 걸쳐 요소 가 널리 사용되기 때문에 Bootstrap의 테이블은 옵트인입니다 . 기본 클래스 .table를 any <table>에 추가한 다음 선택적 수정자 클래스 또는 사용자 정의 스타일로 확장하십시오. 모든 테이블 스타일은 Bootstrap에서 상속되지 않습니다. 즉, 중첩된 테이블은 부모로부터 독립적으로 스타일을 지정할 수 있습니다.

가장 기본적인 테이블 마크업을 사용하여 .table부트스트랩에서 기반 테이블이 어떻게 보이는지 보여줍니다.

# 첫 번째 마지막 핸들
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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

변형

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

수업 표제 표제
기본 셀 셀
주요한 셀 셀
중고등 학년 셀 셀
성공 셀 셀
위험 셀 셀
경고 셀 셀
정보 셀 셀
빛 셀 셀
어두운 셀 셀 
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
보조 기술에 의미 전달

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

악센트 테이블

줄무늬 행

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

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-striped">
  ...
</table>

다음 클래스는 테이블 변형에 추가할 수도 있습니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-dark table-striped">
  ...
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-success table-striped">
  ...
</table>

호버블 행

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

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-hover">
  ...
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-dark table-hover">
  ...
</table>

이러한 호버블 행은 스트라이프 변형과 결합할 수도 있습니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-striped table-hover">
  ...
</table>

활성 테이블

.table-active클래스 를 추가하여 테이블 행이나 셀을 강조 표시합니다 .

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

변형 및 악센트 표는 어떻게 작동합니까?

악센트가 있는 테이블( 줄무늬 행 , 호버링 행 및 활성 테이블 )의 경우 모든 테이블 변형 에 대해 이러한 효과가 작동하도록 하는 몇 가지 기술을 사용했습니다 .

  • --bs-table-bg사용자 정의 속성 을 사용하여 테이블 셀의 배경을 설정하는 것으로 시작합니다 . 그런 다음 모든 테이블 변형은 해당 사용자 정의 속성을 설정하여 테이블 셀에 색상을 지정합니다. 이렇게 하면 반투명 색상을 테이블 배경으로 사용하는 경우 문제가 발생하지 않습니다.
  • box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);그런 다음 지정된 위에 레이어를 사용하여 테이블 셀에 삽입 상자 그림자를 추가 합니다 background-color. 큰 퍼짐을 사용하고 흐림 효과가 없기 때문에 색상은 모노톤이 됩니다. --bs-table-accent-bg기본적으로 설정되어 있지 않으므로 기본 상자 그림자가 없습니다 .
  • .table-striped, 또는 클래스가 추가되면 .table-hover가 반투명 색상으로 설정되어 배경을 채색합니다..table-active--bs-table-accent-bg
  • 각 테이블 변형 --bs-table-accent-bg에 대해 해당 색상에 따라 대비가 가장 높은 색상을 생성합니다. 예를 들어 의 강조 색상 .table-primary은 더 어둡고 강조 색상은 더 .table-dark밝습니다.
  • 텍스트 및 테두리 색상은 동일한 방식으로 생성되며 기본적으로 색상이 상속됩니다.

비하인드 스토리는 다음과 같습니다.

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

테이블 테두리

테두리가 있는 테이블

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

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-bordered">
  ...
</table>

테두리 색상 유틸리티 를 추가하여 색상을 변경할 수 있습니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-bordered border-primary">
  ...
</table>

테두리가 없는 테이블

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

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-borderless">
  ...
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-dark table-borderless">
  ...
</table>

작은 테이블

모든 셀 을 반 으로 자르면 더 컴팩트 .table-sm하게 만들 수 있습니다..tablepadding

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-sm">
  ...
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-dark table-sm">
  ...
</table>

수직 정렬

의 테이블 셀 <thead>은 항상 아래쪽에 수직으로 정렬됩니다. 의 테이블 셀은 기본적으로 상단에서 <tbody>정렬을 상속하고 상단에 정렬됩니다. 수직 정렬 클래스를 <table>사용하여 필요한 경우 다시 정렬합니다.

제목 1 제목 2 제목 3 제목 4
이 셀 vertical-align: middle;은 테이블에서 상속됩니다. 이 셀 vertical-align: middle;은 테이블에서 상속됩니다. 이 셀 vertical-align: middle;은 테이블에서 상속됩니다. 이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다.
vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다. vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다. vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다. 이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다.
이 셀 vertical-align: middle;은 테이블에서 상속됩니다. 이 셀 vertical-align: middle;은 테이블에서 상속됩니다. 이 셀은 맨 위에 정렬됩니다. 이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

중첩

테두리 스타일, 활성 스타일 및 테이블 변형은 중첩 테이블에서 상속되지 않습니다.

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
헤더 헤더 헤더
ㅏ 첫 번째 마지막
비 첫 번째 마지막
씨 첫 번째 마지막
삼 래리 새 @트위터 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

중첩 작동 방식

스타일이 중첩 테이블로 누출되는 것을 방지하기 위해 CSS> 에서 자식 결합자( ) 선택기를 사용합니다. , , 및 의 모든 tds 및 ths 를 대상으로 해야 하므로 선택기가 없으면 선택기가 꽤 길어 보입니다. 따라서 우리는 다소 이상해 보이는 선택기를 사용하여 의 모든 s와 s 를 대상 으로 하지만 잠재적인 중첩 테이블은 대상으로 삼지 않습니다.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>s를 테이블의 직계 자식으로 추가하면 기본적 <tr>으로 로 래핑 <tbody>되므로 선택기가 의도한 대로 작동합니다.

해부

테이블 헤드

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

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

테이블 풋

# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터
보행인 보행인 보행인 보행인 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

캡션

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

사용자 목록
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>를 사용하여 테이블 상단에 놓을 수도 있습니다 .caption-top.

사용자 목록
# 첫 번째 마지막 핸들
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table caption-top">
  <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|-xxl}.

세로 자르기/잘림

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

항상 반응

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

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

중단점 특정

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

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

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

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

사스

변수

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

고리

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

커스터마이징

  • 요인 변수( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor)는 테이블 변형의 대비를 결정하는 데 사용됩니다.
  • 라이트 및 다크 테이블 변형 외에도 테마 색상은 $table-bg-level변수에 의해 밝아집니다.