[Bootstrap4] 06.2 부트스트랩4 테이블2

Posted by 낭만사업가 정대표 블로그 on 2022-03-01 02:59:15

Borderless Table

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Contextual Classes

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

Example

Firstname Lastname Email
Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com
Try it Yourself »

상황별 클래스에서 사용할 수 있는 옵션은 다음과 같습니다.

Class Description
.table-primary Blue(파랑색): 테이블 또는 테이블행 적용
.table-success Green(초록색): 테이블 또는 테이블행 적용
.table-danger Red(빨강색): 테이블 또는 테이블행 적용
.table-info Light blue(하늘색): 테이블 또는 테이블행 적용
.table-warning Orange(주황색): 테이블 또는 테이블행 적용
.table-active Grey(회색): 행과 열에 호버색상을 적용
.table-secondary Grey(회색): 테이블 또는 테이블행 적용
.table-light Light grey(밝은회색) 테이블 또는 테이블행 배경
.table-dark Dark grey(어두운회색) 테이블 또는 테이블행 배경

Table Head Colors

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Small table

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Responsive Tables

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

Example

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Try it Yourself »

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

Class Screen width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

Example

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
Try it Yourself »

Total 106
번호 제목 글쓴이 조회 날짜
106 68 06-20
105 103 06-21
104 38 06-20
103 119 02-25
102 539 02-27
101 13 06-23
100 122 02-25
99 113 02-27
98 11 06-24
97 75 02-25
96 117 02-27
95 21 06-27
94 57 04-11
93 93 02-28
92 64 04-12
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!