Bootstrap 5 테이블

기본 테이블

기본적인 Bootstrap 5 테이블은 내좌표가 있으며 수평 구분선이 있습니다.

.table 테이블에 기본 스타일을 추가했습니다：

예제

직접 시험해 보세요

줄무늬 행

.table-striped 테이블에 사자무늬를 추가하십시오：

예제

직접 시험해 보세요

경계선이 있는 테이블

.table-bordered 테이블과 셀의 모든 경계선에 경계선을 추가하십시오：

예제

직접 시험해 보세요

하이픈 효과가 있는 행

.table-hover 테이블 행에 흐림 효과(회색 배경색)를 추가하십시오：

예제

직접 시험해 보세요

검은색/어두운 테이블

.table-dark 테이블에 검은색 배경을 추가하십시오：

예제

직접 시험해 보세요

어두운 줄무늬 테이블

결합 .table-dark 와 .table-striped 어두운 줄무늬 테이블을 만들기 위해 사용하십시오：

예제

직접 시험해 보세요

하이픈 효과가 있는 어두운 테이블

.table-hover 테이블 행에 흐림 효과(회색 배경색)를 추가하십시오：

예제

직접 시험해 보세요

경계선 없는 테이블

.table-borderless 테이블에서 경계선을 제거하십시오：

예제

직접 시험해 보세요

컨텍스트 클래스

컨텍스트 클래스는 전체 테이블 (<table>)과 테이블 행 (<tr>) 또는 테이블 셀 (<td>) 색상화。

예제

직접 시험해 보세요

사용할 수 있는 컨텍스트 클래스:

클래스 설명
.table-primary 파란색: 중요한 작업을 나타냅니다.
.table-success 녹색: 성공이나 긍정적인 행동을 나타냅니다.
.table-danger 빨간색: 위험하거나 부정적인 행동을 나타냅니다.
.table-info 연한 파란색: 중립적인 정보 변경이나 작업을 나타냅니다.
.table-warning 오렌지: 주의해야 할 경고를 나타냅니다.
.table-active 회색: 테이블 행이나 테이블 셀에 마우스를 올리면 적용되는 색상.
.table-secondary 회색: 중요하지 않은 작업을 나타냅니다.
.table-light 연한 회색 테이블이나 테이블 행 배경.
.table-dark 회색 테이블이나 테이블 행 배경.

표제颜色

테이블 제목에만 배경색을 추가할 수 있는 모든 컨텍스트 클래스를 사용할 수 있습니다:

예제

직접 시험해 보세요

소형 테이블

.table-sm 셀 채우기를 반으로 줄여 테이블을 작게 만드는 클래스:

예제

직접 시험해 보세요

반응형 테이블

.table-responsive 필요할 때 테이블에 스크롤을 추가하는 클래스(수평 방향에서 너무 크다면):

예제

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

직접 시험해 보세요

화면 너비에 따라 테이블에 스크롤이 추가되는 시점을 결정할 수 있습니다:

클래스 화면 너비
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

예제

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

직접 시험해 보세요