내용으로 이동 문서 목록으로 이동
GitHub에서 보기

테이블

Bootstrap을 사용한 테이블의 opt-in 스타일에 대한 문서 및 예시 (JavaScript 플러그인에서 널리 사용됨)입니다.

목차

개요

<table> 요소는 캘린더나 날짜 선택기 같은 서드 파티 위젯에서 폭넓게 사용되고 있기 때문에 Bootstrap의 테이블은 opt-in 방식을 사용합니다. 기본 클래스 .table을 <table>에 넣으면 우리의 선택 수정자 클래스 또는 커스텀 스타일로 확장할 수 있습니다. 모든 테이블 스타일이 Bootstrap에 상속되지 않기 때문에 중첩된 테이블은 부모와 독립적으로 스타일을 지정할 수 있습니다.

가장 기본적인 테이블 마크업을 사용해서 .table 기반 테이블이 Bootstrap에서 어떻게 표시되는지 보여드리겠습니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

변형

상황별 테이블 색상, 테이블 행 또는 개별 셀을 사용하세요.

Heads up! Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
<!-- 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>내의 테이블 행에 줄무늬 (zebra-striping)를 추가합니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped">
  ...
</table>

스트라이프 열

테이블 열에 zebra-striping를 추가하려면 .table-striped-columns를 사용합니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped-columns">
  ...
</table>

이러한 클래스는 테이블 변형에도 추가할 수 있습니다:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped-columns">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped-columns">
  ...
</table>

호버할 수 있는 행

.table-hover를 추가하여 <tbody>내의 테이블 행에 마우스 오버 상태를 활성화합니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-hover">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-hover">
  ...
</table>

이러한 호버링 가능한 행은 스트라이프 행 변형과 결합할 수도 있습니다:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped table-hover">
  ...
</table>

활성화 테이블

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

변형과 강조 테이블은 어떻게 작동하나요?

악센트가 있는 테이블 (스트라이프 행, 스트라이프 열, 호버할 수 있는 행, 활성화 테이블)을 위해서 이러한 효과가 모든 테이블 변형에서 작동하도록 몇 가지 기술을 사용했습니다:

  • 먼저 --bs-table-bg 사용자 정의 속성으로 테이블 셀의 배경을 설정합니다. 그런 다음 모든 테이블 변형에 해당 사용자 정의 속성을 설정하여 테이블 셀을 색상화합니다. 이렇게 하면 반투명 색상을 테이블 배경으로 사용하더라도 문제가 발생하지 않습니다.
  • 그런 다음 box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));를 사용하여 테이블 셀에 삽입 상자 그림자를 추가하여 지정된 background-color 위에 레이어를 추가합니다. It uses custom cascade to override the box-shadow, regardless the CSS specificity. 큰 스프레드를 사용하고 블러를 사용하지 않기 때문에 색상이 모노톤이 됩니다. --bs-table-accent-bg는 기본적으로 설정되어 있지 않기 때문에 기본 상자 그림자가 없습니다.
  • .table-striped, .table-striped-columns, .table-hover 또는 .table-active 클래스가 추가되면 --bs-table-bg-type 또는 --bs-table-bg-state (기본값은 initial)가 반투명 (--bs-table-striped-bg, --bs-table-active-bg or --bs-table-hover-bg)으로 설정되어 --bs-table-accent-bg를 재정의합니다.
  • 각 테이블 변형에 대해 해당 색상에 따라 가장 높은 대비를 가진 --bs-table-accent-bg 색상을 생성합니다. 예를 들어 .table-primary의 강조 색상은 더 어둡고 .table-dark는 더 밝은 강조 색상입니다.
  • 텍스트 및 테두리 색상은 동일한 방식으로 생성되며 기본적으로 색상이 상속됩니다.

내용을 보면 다음과 같습니다:

scss/mixins/_table-variants.scss 
@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));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

테이블 테두리

테두리가 있는 테이블

셀의 모든 면에 테두리가 있는 테이블을 만들려면 .table-border를 추가하면 됩니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered">
  ...
</table>

테두리 색상 유틸리티는 색상을 변경하는 데에 사용할 수 있습니다:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered border-primary">
  ...
</table>

테두리가 없는 테이블

테두리가 없는 테이블을 만들려면 .table-borderless를 추가하면 됩니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-borderless">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-borderless">
  ...
</table>

작은 테이블

.table-sm을 추가하여 모든 셀 padding을 반으로 잘라 .table을 더 간결하게 만듭니다.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-sm">
  ...
</table>

테이블 그룹 구분선

테이블 그룹인 <thead>, <tbody>, <tfoot> 사이에 .table-group-divider를 사용하여 테두리를 더 두껍게 추가하고 그 사이를 더 어둡게 합니다. border-top-color을 변경하여 색상을 사용자 정의합니다(현재 유틸리티 클래스는 제공하지 않음).

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
html 
<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 class="table-group-divider">
    <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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

수직 정렬

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

Heading 1Heading 2Heading 3Heading 4
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell is aligned to the top.This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
<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>

중첩

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

#FirstLastHandle
1MarkOtto@mdo
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
3JohnDoe@social
<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

중첩 작동 원리

중첩된 테이블로 스타일이 유출되는 것을 방지하기 위해 CSS에서 자식 결합기(>) 선택기를 사용합니다. thead, tbody, tfoot의 모든 td와 th를 대상으로 해야 하므로 선택기가 없으면 선택기가 꽤 길어 보일 것입니다. 따라서 다소 이상하게 보이는 .table > :not(caption) > * > * 선택기를 사용하여 .table의 모든 td와 th를 대상으로 하고 있습니다. 하지만, 잠재적인 중첩된 테이블은 대상으로 하지 않습니다.

테이블의 직계 자식으로 <tr>을 추가하면 해당 <tr>은 기본적으로 <tbody>에 줄바꿈되므로 선택자가 의도한 대로 작동합니다.

구조

테이블 머리글

테이블 및 어두운 테이블과 유사하게, 수정자 클래스 .table-light 또는 .table-dark를 사용하여 <thead>가 밝은 회색 또는 어두운 회색으로 표시되도록 합니다.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

테이블 하단

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
FooterFooterFooterFooter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

캡션

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

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

.caption-top으로 테이블 상단에 <caption>을 넣을 수도 있습니다.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
html 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

반응형 테이블

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

수직 자르기/잘림

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

항상 반응형

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

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

중단점으로 구분

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

이러한 테이블은 반응형 스타일이 특정 뷰포트 너비에 적용될 때까지 깨져보일 수 있습니다.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
<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>

CSS

Sass 변수

scss/_variables.scss 
$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:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Sass 루프

scss/_variables.scss 
$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-scale 변수에 의해 밝아집니다.