부트스트랩 4 테이블

부트스트랩 4 기본 테이블

기본 Bootstrap 4 테이블에는 가벼운 패딩과 수평 구분선이 있습니다.

.table클래스는 테이블에 기본 스타일을 추가합니다 .

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

줄무늬 행

이 .table-striped클래스는 테이블에 얼룩말 줄무늬를 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

테두리가 있는 테이블

이 .table-bordered클래스는 테이블과 셀의 모든 면에 테두리를 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

호버 행

클래스 는 .table-hover테이블 행에 호버 효과(회색 배경색)를 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

블랙/다크 테이블

클래스 는 .table-dark테이블에 검정색 배경을 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

어두운 줄무늬 테이블

.table-dark와 결합 .table-striped하여 어두운 줄무늬 테이블을 만듭니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

호버블 다크 테이블

클래스 는 .table-hover테이블 행에 호버 효과(회색 배경색)를 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

테두리 없는 테이블

클래스 는 .table-borderless테이블에서 테두리를 제거합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

컨텍스트 클래스

상황별 클래스를 사용하여 전체 테이블( <table>), 테이블 행( <tr>) 또는 테이블 셀( <td>)에 색상을 지정할 수 있습니다.

예시

Firstname	Lastname	Email
Default	Defaultson	[email protected]
Primary	Joe	[email protected]
Success	Doe	[email protected]
Danger	Moe	[email protected]
Info	Dooley	[email protected]
Warning	Refs	[email protected]
Active	Activeson	[email protected]
Secondary	Secondson	[email protected]
Light	Angie	[email protected]
Dark	Bo	[email protected]

사용할 수 있는 컨텍스트 클래스는 다음과 같습니다.

등급	설명
`.table-primary`	파란색: 중요한 작업을 나타냅니다.
`.table-success`	녹색: 성공 또는 긍정적인 작업을 나타냅니다.
`.table-danger`	빨간색: 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
`.table-info`	하늘색: 중립적인 정보 변경 또는 조치를 나타냅니다.
`.table-warning`	주황색: 주의가 필요할 수 있는 경고를 나타냅니다.
`.table-active`	회색: 표 행 또는 표 셀에 호버 색상을 적용합니다.
`.table-secondary`	회색: 약간 덜 중요한 작업을 나타냅니다.
`.table-light`	밝은 회색 테이블 또는 테이블 행 배경
`.table-dark`	어두운 회색 테이블 또는 테이블 행 배경

테이블 헤드 색상

클래스 는 .thead-dark테이블 헤더에 검정색 배경을 추가하고 .thead-light클래스는 테이블 헤더에 회색 배경을 추가합니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

작은 테이블

이 .table-sm클래스는 셀 패딩을 반으로 잘라 테이블을 더 작게 만듭니다.

예시

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

반응형 테이블

.table-responsive클래스는 필요할 때 테이블에 스크롤바를 추가합니다(수평으로 너무 큰 경우) :

예시

화면 너비에 따라 테이블에 스크롤 막대가 표시되어야 하는 시기를 결정할 수도 있습니다.

등급	화면 너비
`.table-responsive-sm`	< 576픽셀
`.table-responsive-md`	< 768픽셀
`.table-responsive-lg`	< 992픽셀
`.table-responsive-xl`	< 1200픽셀

예시

❮ 이전의 다음 ❯

부트스트랩 4 튜토리얼

부트스트랩 4 그리드

부트스트랩 4 기타

부트스트랩 4 참조