개요
<table> 요소는 캘린더나 날짜 선택기 같은 서드 파티 위젯에서 폭넓게 사용되고 있기 때문에 Bootstrap의 테이블은 opt-in 방식을 사용합니다. 기본 클래스 .table을 <table>에 넣으면 우리의 선택 수정자 클래스 또는 커스텀 스타일로 확장할 수 있습니다. 모든 테이블 스타일이 Bootstrap에 상속되지 않기 때문에 중첩된 테이블은 부모와 독립적으로 스타일을 지정할 수 있습니다.
가장 기본적인 테이블 마크업을 사용해서 .table 기반 테이블이 Bootstrap에서 어떻게 표시되는지 보여드리겠습니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<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>
변형
상황별 테이블 색상, 테이블 행 또는 개별 셀을 사용하세요.
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| Cell | Cell |
| 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 클래스로 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인하세요.
테이블 강조
스트라이프 행
.table-striped를 사용하여 <tbody>내의 테이블 행에 줄무늬 (zebra-striping)를 추가합니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-striped"> ... </table>
이러한 클래스는 테이블 변형에도 추가할 수 있습니다:
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-dark table-striped"> ... </table>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-success table-striped"> ... </table>
호버할 수 있는 행
.table-hover를 추가하여 <tbody>내의 테이블 행에 마우스 오버 상태를 활성화합니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-hover"> ... </table>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-dark table-hover"> ... </table>
These hoverable rows can also be combined with the striped variant:
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-striped table-hover"> ... </table>
활성화 테이블
.table-active 클래스를 추가하여 테이블 행 또는 셀을 강조 표시합니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<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>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<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 0009999px 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-border를 추가하면 됩니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-bordered"> ... </table>
테두리 색상 유틸리티는 색상을 변경하는 데에 사용할 수 있습니다:
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-bordered border-primary"> ... </table>
테두리가 없는 테이블
테두리가 없는 테이블을 만들려면 .table-borderless를 추가하면 됩니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-borderless"> ... </table>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-dark table-borderless"> ... </table>
얇은 테이블
.table-sm을 추가하여 모든 셀 padding을 반으로 잘라 .table을 더 간결하게 만듭니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-sm"> ... </table>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-dark table-sm"> ... </table>
수직 정렬
<thead>의 테이블 셀은 항상 하단에 수직으로 정렬됩니다. <tbody>의 테이블 셀은 <table>에서 정렬을 상속하며 기본적으로 상단에 정렬됩니다. 수직 정렬 클래스를 사용하여 필요한 곳에 다시 정렬합니다.
| This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | 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. |
| This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | 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. |
| This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This 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>
중첩
테두리 스타일, 활성화 스타일 및 테이블 변형은 중첩된 테이블에 상속되지 않습니다.
| Mark | Otto | @mdo | ||||
| ||||||
| Larry | the Bird |
<table class="table table-striped"> <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>가 밝은 회색 또는 어두운 회색으로 표시되도록 합니다.
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
<table class="table"> <thead class="table-light"> ... </thead> <tbody> ... </tbody> </table>
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
<table class="table"> <thead class="table-dark"> ... </thead> <tbody> ... </tbody> </table>
테이블 하단
| Mark | Otto | @mdo | |
| Jacob | Thornton | @fat | |
| Larry | the Bird | ||
| Footer | Footer | Footer | Footer |
<table class="table"> <thead> ... </thead> <tbody> ... </tbody> <tfoot> ... </tfoot> </table>
테이블 이름
<caption>은 테이블 이름과 같은 기능을 합니다. 스크린 리더를 사용하는 사용자가 테이블을 찾고 그 내용을 이해하고 읽을 것인지 결정할 수 있도록 도와줍니다.
List of users
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry the Bird |
<table class="table table-sm"> <caption>List of users</caption> <thead> ... </thead> <tbody> ... </tbody> </table>
.caption-top으로 테이블 상단에 <caption>을 넣을 수도 있습니다.
List of users
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
<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를 사용합니다.
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive"> <table class="table"> ... </table> </div>
중단점으로 구분
특정 중단점까지 반응형 테이블을 생성하려면 필요에 따라 .table-responsive{-sm|-md|-lg|-xl|-xxl}을 사용합니다. 중단점 이상에서 테이블은 정상적으로 작동하며 가로로 스크롤되지 않습니다.
이러한 테이블은 반응형 스타일이 특정 뷰포트 너비에 적용될 때까지 깨져보일 수 있습니다.
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<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>
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: $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 변수에 의해 밝아집니다.