Tables

Tables (테이블)

JavaScript 플러그인에서 널리 사용되기 때문에 opt-in으로 제공되는 Bootstrap 테이블 스타일링의 문서와 예시를 다룹니다.

출처: 문서

본문

개요 (Overview)

달력이나 날짜 선택기 같은 서드파티 위젯 전반에 걸쳐 <table> 요소가 널리 사용되기 때문에 Bootstrap 테이블은 opt-in입니다. 어떤 <table>에든 기본 클래스 .table을 추가한 다음, 선택적 modifier 클래스나 커스텀 스타일로 확장하세요. Bootstrap에서는 모든 테이블 스타일이 상속되지 않으므로 중첩 테이블을 부모와 독립적으로 스타일할 수 있습니다.

가장 기본적인 테이블 마크업을 사용하면 .table 기반 테이블이 Bootstrap에서 다음과 같이 보입니다.

<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>

변형 (Variants)

상황별 클래스로 테이블, 테이블 행 또는 개별 셀에 색을 입히세요.

주의! 테이블 변형을 생성하는 데 사용되는 CSS가 더 복잡하기 때문에 v6까지는 색상 모드 적응형 스타일을 보기 어려울 것입니다.

클래스	제목	제목
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

<!-- 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 클래스로 숨겨진 추가 텍스트 같은 대체 수단을 통해 포함되도록 해 주세요.

강조 테이블 (Accented tables)

줄무늬 행 (Striped rows)

.table-striped를 사용해 <tbody> 안의 어떤 테이블 행에든 얼룩말 줄무늬를 추가하세요.

<table class="table table-striped">
  ...
</table>

줄무늬 열 (Striped columns)

.table-striped-columns를 사용해 어떤 테이블 열에든 얼룩말 줄무늬를 추가하세요.

<table class="table table-striped-columns">
  ...
</table>

이 클래스들은 테이블 변형에도 추가할 수 있습니다:

<table class="table table-dark table-striped">
  ...
</table>

<table class="table table-dark table-striped-columns">
  ...
</table>

<table class="table table-success table-striped">
  ...
</table>

<table class="table table-success table-striped-columns">
  ...
</table>

호버 가능한 행 (Hoverable rows)

<tbody> 안의 테이블 행에 호버 상태를 활성화하려면 .table-hover를 추가하세요.

<table class="table table-hover">
  ...
</table>

<table class="table table-dark table-hover">
  ...
</table>

이 호버 가능한 행들은 줄무늬 행 변형과도 결합할 수 있습니다:

<table class="table table-striped table-hover">
  ...
</table>

활성 테이블 (Active tables)

.table-active 클래스를 추가해 테이블 행이나 셀을 강조하세요.

<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>

<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>

변형과 강조 테이블은 어떻게 동작하나요? (How do the variants and accented tables work?)

강조 테이블(줄무늬 행, 줄무늬 열, 호버 가능한 행, 활성 테이블)을 위해 모든 테이블 변형에서 효과가 작동하도록 몇 가지 기법을 사용했습니다:

• 먼저 --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)));으로 테이블 셀에 inset box shadow를 추가해 지정된 어떤 background-color 위에 겹쳐 놓습니다. CSS 특이성과 무관하게 box-shadow를 덮어쓰는 커스텀 캐스케이드를 사용합니다. 거대한 spread를 사용하고 blur가 없기 때문에 색상은 모노톤이 됩니다. --bs-table-accent-bg는 기본적으로 transparent로 설정되므로 기본 box shadow가 없습니다.
• .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 또는 --bs-table-hover-bg)으로 설정되어 배경에 색을 입히고 기본 --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));
    $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 borders)

테두리가 있는 테이블 (Bordered tables)

테이블과 셀의 모든 면에 테두리를 추가하려면 .table-bordered를 추가하세요.

<table class="table table-bordered">
  ...
</table>

테두리 색상 유틸리티를 추가해 색상을 바꿀 수 있습니다:

<table class="table table-bordered border-primary">
  ...
</table>

테두리가 없는 테이블 (Tables without borders)

테두리가 없는 테이블에는 .table-borderless를 추가하세요.

<table class="table table-borderless">
  ...
</table>

<table class="table table-dark table-borderless">
  ...
</table>

작은 테이블 (Small tables)

.table-sm을 추가하면 모든 셀 padding을 절반으로 줄여 어떤 .table이든 더 컴팩트하게 만듭니다.

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

<table class="table table-dark table-sm">
  ...
</table>

테이블 그룹 구분선 (Table group dividers)

.table-group-divider로 테이블 그룹 — <thead>, <tbody>, <tfoot> — 사이에 더 두껍고 어두운 테두리를 추가하세요. border-top-color를 변경해 색상을 커스터마이즈하세요(현재 이것에 대한 유틸리티 클래스는 제공하지 않습니다).

<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>

세로 정렬 (Vertical alignment)

<thead>의 테이블 셀은 항상 세로로 아래쪽에 정렬됩니다. <tbody>의 테이블 셀은 <table>에서 정렬을 상속하며 기본적으로 위쪽에 정렬됩니다. 필요할 때 세로 정렬 클래스를 사용해 다시 정렬하세요.

<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>

중첩 (Nesting)

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

<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

중첩은 어떻게 동작하나요? (How nesting works)

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

테이블의 직계 자식으로 <tr>s를 추가하면 그 <tr>들이 기본적으로 <tbody>로 감싸져 우리의 선택자가 의도대로 동작한다는 점에 주의하세요.

해부 (Anatomy)

Table head

테이블과 다크 테이블과 비슷하게, modifier 클래스 .table-light 또는 .table-dark를 사용해 <thead>s를 밝거나 어두운 회색으로 만들 수 있습니다.

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Table foot

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Captions

<caption>은 테이블의 제목처럼 기능합니다. 스크린 리더 사용자가 테이블을 찾고, 그것이 무엇에 관한 것인지 이해하며, 읽을지 결정하는 데 도움이 됩니다.

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

.caption-top으로 <caption>을 테이블 위쪽에 놓을 수도 있습니다.

<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>

반응형 테이블 (Responsive tables)

반응형 테이블은 테이블을 쉽게 가로로 스크롤할 수 있게 해 줍니다. .table을 .table-responsive로 감싸 어떤 테이블이든 모든 뷰포트에서 반응형으로 만들 수 있습니다. 또는 .table-responsive{-sm|-md|-lg|-xl|-xxl}을 사용해 특정 브레이크포인트까지 반응형인 테이블을 지정할 수 있습니다.

세로 클리핑/잘림 (Vertical clipping/truncation)

반응형 테이블은 overflow-y: hidden을 사용하는데, 이것은 테이블의 아래쪽이나 위쪽 가장자리를 넘어가는 어떤 콘텐츠도 잘라냅니다. 특히 드롭다운 메뉴와 다른 서드파티 위젯을 잘라낼 수 있습니다.

항상 반응형 (Always responsive)

모든 브레이크포인트에서 가로로 스크롤되는 테이블에는 .table-responsive를 사용하세요.

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

브레이크포인트 특정 (Breakpoint specific)

필요에 따라 .table-responsive{-sm|-md|-lg|-xl|-xxl}을 사용해 특정 브레이크포인트까지 반응형 테이블을 만드세요. 그 브레이크포인트부터 위로는 테이블이 정상적으로 동작하고 가로로 스크롤되지 않습니다.

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

<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 변수

$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 루프 (Sass loops)

$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,
);

커스터마이즈 (Customizing)

• factor 변수들($table-striped-bg-factor, $table-active-bg-factor 및 $table-hover-bg-factor)은 테이블 변형의 대비를 결정하는 데 사용됩니다.
• light와 dark 테이블 변형 외에도 테마 색상은 $table-bg-scale 변수로 밝아집니다.

더 알아보기 (Learn more)

• Bootstrap 문서