목차
Bootstrap Tables
- description : Bootstrap Tables
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-24
Bootstrap Basic Table
기본 부트스트랩 테이블에는 얇은 패딩과 수평 구분선만 있습니다.
.table 클래스는 테이블에 기본 스타일을 추가합니다.
예제
Basic Table
The .table class adds basic styling (light padding and only horizontal dividers) to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Striped Rows
.table-striped 클래스는 테이블에 얼룩말 줄무늬(zebra-stripes)를 추가합니다.
예제
Basic Table
The .table class adds basic styling (light padding and only horizontal dividers) to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Bordered Table
.table-bordered 테이블과 셀의 모든 면에 테두리(borders)를 추가합니다.
예제
Bordered Table
The .table-bordered class adds borders to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Rows
.table-hover 클래스는 테이블의 가로 행에 호버 효과(회색 배경색)를 추가합니다.
예제
Hover Rows
The .table-hover class enables a hover state on table rows:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@examle.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Condensed Table
.table-condensed 클래스는 셀 패딩을 절반으로 줄여 테이블을 더 간결하게 만듭니다.
예제
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@examle.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
컨텍스추얼 클래스는 테이블 가로 행(<tr>) 또는 테이블 셀(<td>)에 색상을 지정할 수 있습니다.
예제
Contextual Classes
Contextual Classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.
| First Name | Last Name | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@somemail.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@wxample.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
사용할 수 있는 컨텍스추얼 클래스는 아래와 같습니다.
| Class | Description |
.active | 테이블 가로 행이나 테이블 셀에 호버 색상을 적용합니다. |
|---|---|
.success | 성공 또는 긍정적인 작업을 나타냅니다. |
.info | 중립적 정보 변경 또는 작업을 나타냅니다. |
.warning | 주의가 필요한 경고를 나타냅니다. |
.danger | 위험하거나 잠재적으로 부정적인 작업을 나타냅니다. |
Responsive Tables
.table-responsive 클래스는 반응형 테이블을 만듭니다.
그러면 테이블이 소형 장치(768px 미만) 가로로 스크롤됩니다.
너비가 768px보다 큰 화면에서 볼 때는 차이가 없습니다.
예제
Table
The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
| # | First Name | lsdt Name | Age | City | country |
|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA |
