테이블

테이블 Opt-in 스타일 지정에 대한 문서와 예제. (자바스크립트 플러그인에서 많이 사용됨)

기본 예제

캘린더 및 날짜선택 도구와 같은 third-party 위젯에서 테이블이 광범위하게 사용되기 때문에 테이블을 opt-in 하도록 설계했습니다. 기본 클래스 .table<table>에 추가한 다음, 맞춤 스타일을 적용하거나 내장된 다양한 클래스로 확장하면 됩니다.

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

# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>

테이블 헤드 옵션

테이블 및 dark 테이블과 마찬가지로, .thead-light 또는 .thead-dark 를 사용하여 <thead> 를 밝게 또는 어둡게 표시 합니다.

# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>

줄무늬 행

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<tbody> 내의 모든 테이블 행에 얼룩말 줄무늬를 추가하려면 .table-striped 를 사용하십시오.

# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 이름 아이디
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hover가 적용된 행

<tbody> 내의 행에 hover 상태를 적용하려면 .table-hover 를 추가하십시오.

# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>

작은 테이블

셀 padding을 절반으로 줄임으로써 테이블을 더 작게 만들려면 .table-sm 을 추가하십시오.

# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>

상황별 클래스

상황별 클래스를 사용하여 행이나 셀에 색상을 지정합니다.

Type 칼럼 제목 칼럼 제목 칼럼 제목
Active 칼럼 내용 칼럼 내용 칼럼 내용
Default 칼럼 내용 칼럼 내용 칼럼 내용
Primary 칼럼 내용 칼럼 내용 칼럼 내용
Secondary 칼럼 내용 칼럼 내용 칼럼 내용
Success 칼럼 내용 칼럼 내용 칼럼 내용
Danger 칼럼 내용 칼럼 내용 칼럼 내용
Warning 칼럼 내용 칼럼 내용 칼럼 내용
Info 칼럼 내용 칼럼 내용 칼럼 내용
Light 칼럼 내용 칼럼 내용 칼럼 내용
Dark 칼럼 내용 칼럼 내용 칼럼 내용
<!-- 행(row)에 적용 -->
<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>

<!-- 셀에 적용 (`td` 또는 `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>

Dark 테이블에서는 기본 테이블 배경속성을 사용할 수 없지만 텍스트 또는 백그라운드 유틸리티를 사용하여 비슷한 스타일을 얻을 수 있습니다.

# 칼럼 제목 칼럼 제목 칼럼 제목
1 칼럼 내용 칼럼 내용 칼럼 내용
2 칼럼 내용 칼럼 내용 칼럼 내용
3 칼럼 내용 칼럼 내용 칼럼 내용
4 칼럼 내용 칼럼 내용 칼럼 내용
5 칼럼 내용 칼럼 내용 칼럼 내용
6 칼럼 내용 칼럼 내용 칼럼 내용
7 칼럼 내용 칼럼 내용 칼럼 내용
8 칼럼 내용 칼럼 내용 칼럼 내용
9 칼럼 내용 칼럼 내용 칼럼 내용
<!-- 행에 적용 -->
<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>

<!-- 셀에 적용 (`td` 또는 `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>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

반응형 테이블

.table.table-responsive{-sm|-md|-lg|-xl} 을 추가하여 각각의 최대 너비 중단점 575px, 767px, 991px 및 1199px에서 각각 가로 스크롤 하도록 하여 반응형 테이블을 만듭니다.

테이블이 컨테이너 보다 넓어서 항상 가로 스크롤이 필요한 경우, .table.table-responsive 클래스를 추가하세요.

수직 클리핑/자르기

반응형 테이블은 overflow-y: hidden 을 사용합니다. 이 overflow는 테이블의 아래쪽이나 위쪽 가장자리를 넘어서는 모든 내용을 잘라냅니다. 특히 이것은 드롭다운 메뉴 및 기타 third-party 위젯을 잘라낼 수 있습니다.

# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<table class="table table-responsive">
  ...
</table>

캡션

<caption>은 제목과 같은 기능을 합니다. 그것은 스크린리더를 사용하는 사용자들이 테이블을 찾고 그것이 무엇인지 이해하고 ‘그것을 읽고 싶은지’를 결정하는 것을 도와 줍니다.

회원목록
# 이름 아이디
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <caption>회원목록</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col"></th>
      <th scope="col">아이디</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>