Borderless Table
.table-borderless
클래스는 테이블에서 테두리를 제거합니다.
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
상황별 클래스를 사용하여 전체 표(<table>), 표 행(<tr>) 또는 표 셀(<td>)에 색상을 지정할 수 있습니다.
Example
| Firstname | Lastname | |
|---|---|---|
| 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 |
상황별 클래스에서 사용할 수 있는 옵션은 다음과 같습니다.
| 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 | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Small table
.table-sm
클래스는 셀 패딩을 반으로 잘라 테이블을 더 작게 만듭니다.
Example
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Responsive Tables
.table-responsive
클래스는 필요할 때 테이블에 스크롤바를 추가합니다(수평으로 너무 클 때).
화면 너비에 따라 테이블에 스크롤 막대가 표시되어야 하는 시기를 결정할 수도 있습니다.
| 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 »
- 22-03-01
- 89 회
- 0 건